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>

支持的浏览器

属性
值	是	是	是	是	是

打印页面