HTML - DOM checked 屬性

HTML DOM 的checked屬性用於設定（更新）或獲取（檢索）複選框欄位的選中狀態。它返回一個布林值：“true”表示複選框已選中，“false”表示未選中。

在HTML中，“checkbox”是一種屬於HTML 表單的輸入欄位型別，用type = "checkbox"指定。它允許使用者在填寫表單時選擇多個選項。

語法

以下是HTML DOM checked（獲取checked屬性）屬性的語法：

checkboxObject.checked

要更新（設定）checked屬性，請使用以下語法：

checkboxObject.checked = true|false

引數

因為它是一個屬性，所以它不接受任何引數。

返回值

此屬性返回一個布林值（true或false），表示複選框是否已選中。

示例 1

如果複選框欄位已選中，則返回“true”。

以下是HTML DOM checked屬性的基本示例：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked</title>
</head>
<body>
<label for="">Checkbox Field:</label>
<input type="checkbox" id="my_checkbox" checked>
<p>Click the below button to check the checkbox field checked status.</p>
<button id="check_btn">Check Status</button>
<p id="result"></p>
<script>
   document.getElementById("check_btn").addEventListener("click", ()=>{
      let status = document.getElementById("my_checkbox").checked;
      document.getElementById("result").innerHTML = "The checkbox field checked status: " + status; 
   });
</script>
</body>
</html>

示例 2

如果複選框欄位未選中，則返回“false”。

以下是HTML DOM checked屬性的另一個示例。我們使用此屬性來檢查複選框欄位是否已選中：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked</title>
</head>
<body>
<label for="">Checkbox Field:</label>
<input type="checkbox" id="my_checkbox">
<p>Click the below button to check the checkbox field checked status.</p>
<button id="check_btn">Check Status</button>
<p id="result"></p>
<script>
   document.getElementById("check_btn").addEventListener("click", ()=>{
      let status = document.getElementById("my_checkbox").checked;
      document.getElementById("result").innerHTML = "The checkbox field checked status: " + status; 
   });
</script>
</body>
</html>

示例 3：更新複選框欄位狀態

在下面的示例中，我們使用checked屬性將複選框欄位的當前選中狀態從“true”更新為“false”：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked</title>
</head>
<body>
<label for="">Checkbox Field:</label>
<input type="checkbox" id="my_checkbox">
<p>Click the below button to update the checkbox field.</p>
<button id="check_btn">Update Status</button>
<p id="result"></p>
<script>
   document.getElementById("check_btn").addEventListener("click", ()=>{
      let status = document.getElementById("my_checkbox");
      status.checked = true;
      document.getElementById("result").innerHTML = "Status updated to true";
   });
</script>
</body>
</html>

示例 4：在亮模式和暗模式之間切換

以下示例演示如何使用 checked 屬性透過選中和取消選中複選框欄位來在亮模式和暗模式之間切換：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked</title>
<style>
   div{
      width: 200px;
      height: 200px;
      border: 1px solid green;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      justify-content: center;
      align-items: center;
      display: flex;
      font-family: sans-serif;
      font-weight: bold;
      margin: 5px 0px;
      transition: background-color 0.5s, color 0.5s;
   }
</style>
</head>
<body>
<p>Checked and unchecked the checkbox to switch between dark and light mode.</p>
<input type="checkbox" id="my_checkbox"><span id="msg">Switch to Dark</span>
<div id="demo">Welcome to Tutorialspoint</div>
<script>
   document.getElementById("my_checkbox").addEventListener("click", ()=>{
      let status = document.getElementById("my_checkbox");
      let my_box = document.getElementById('demo');
      if(status.checked == true){
         my_box.style.backgroundColor = "black";
         my_box.style.color = "white";
         document.getElementById('msg').innerHTML = "Switch to Light";
      }
      else{
         my_box.style.backgroundColor = "white";
         my_box.style.color = "black";
         document.getElementById('msg').innerHTML = "Switch to Dark";
      }
   });
</script>
</body>
</html>

支援的瀏覽器

屬性
值	是	是	是	是	是

列印頁面