HTML 如何切换一个复选框和一整组复选框

切换的意思是，每当用户选中一个复选框时，该组的所有复选框都应取消勾选，而当用户选中该组中的任何一个复选框时，单个复选框也应取消勾选。我们可以用JavaScript实现这个功能。在本教程中，我们将学习如何在HTML中的一个复选框和一整组复选框之间进行切换。

语法

用户可以按照下面的语法，在HTML中的一个复选框和一整组复选框之间进行切换。

checkboxes.forEach((checkbox) => {
   checkbox.checked = false;
})

在上面的语法中，checkboxes是指组中的所有复选框。要取消复选框，我们可以设置false作为复选框的checked属性的值。

例子1

在下面的例子中，我们创建了一个名为table_size的复选框组。此外，我们还创建了单个复选框。

在该组的每个复选框上，我们都添加了一个onclick事件，它调用了clearSingle()函数。在clearSingle()函数中，我们使用JavaScript访问单个复选框并取消它。

此外，在单个复选框上，我们还添加了onclick事件，它调用了clearGroup()函数。在clearGroup()函数中，我们访问该组的所有复选框，并取消它们。

<html>
<body>
   <h2> Using the <i> JavaScript </i> to toggle between one checkbox and group of checkboxes. </h2>
   <label for = "table1"> 4 Feet </label> 
   <input type = "checkbox" name = "table_size" id = "table1" value = "4Feet" onclick = "clearSingle()">
   <label for = "table2"> 5 Feet </label>
   <input type = "checkbox" name = "table_size" id = "table2" value = "5Feet" onclick = "clearSingle()">
   <label for = "table3"> 6 Feet </label>
   <input type = "checkbox" name = "table_size" id = "table3" value = "6Feet" onclick = "clearSingle()">
   <label for = "table4"> 8 Feet </label>
   <input type = "checkbox" name = "table_size" id = "table4" value = "8Feet" onclick = "clearSingle()"> <br> <br>
   <label for = "clear"> Clear </label>
   <input type = "checkbox" name = "clear" id = "clear" value = "clear" onclick = "clearGroup()">
</body>
<script>
   function clearGroup() {
      let checkboxes = document.getElementsByName('table_size');
      checkboxes.forEach((checkbox) => {
         checkbox.checked = false;
      })
   }
   function clearSingle() {
      let singleCheckBox = document.getElementById('clear');
      singleCheckBox.checked = false; 
  }
</script>
</html>

在上面的例子中，我们给每个复选框都添加了一个onclick事件，这会使代码变得更加复杂和难以阅读。因此，在例子2中，我们将使用JavaScript为每个复选框添加一个onchange事件。

例2

在下面的例子中，我们创建了一组复选框和一个独立的复选框。我们在该组的每个复选框上都添加了一个onchange事件。因此，每当该组中的任何一个复选框发生变化时，它都会清除这个单独的复选框。

此外，我们还在单个复选框上添加了onchange事件。每当单个复选框发生任何变化，它就会清除该组的所有复选框。

<html>
<body>
   <h2> Using the <i> JavaScript </i> to toggle between one checkbox and group of checkboxes </h2>
   <label for = "USD"> 20 USD </label>
   <input type = "checkbox" name = "Currency" id = "USD" value = "20">
   <label for = "INR"> 1500 INR </label>
   <input type = "checkbox" name = "Currency" id = "INR" value = "1500"> 
   <label for = "Euro"> 20 Euro </label>
   <input type = "checkbox" name = "Currency" id = "Euro" value = "20">
   <label for = "GBP"> 18 GBP </label>
   <input type = "checkbox" name = "Currency" id = "GBP" value = "18">
   <br> <br>
   <label for = "clear"> clear </label>
   <input type = "checkbox" name = "clear" id = "clear" value = "clear">
</body>
<script>
   let currencyCheckBoxes = document.getElementsByName('Currency');
   let singleCheckBox = document.getElementById('clear');
   currencyCheckBoxes.forEach((checkbox) => {
      checkbox.onchange = function () {
         singleCheckBox.checked = false;
      }
   })
   singleCheckBox.onchange = () => {
      currencyCheckBoxes.forEach((checkbox) => {
         checkbox.checked = false;
      })
   }
</script>
</html>