如何在 HTML 中切换单个复选框和一组复选框?

htmlweb developmentfront end technology更新于 2025/1/7 16:44:17

切换意味着，每当用户选中单个复选框时，该组中的所有复选框都应取消选中;而当用户选中组中的任意一个复选框时，该复选框都应取消选中。我们可以使用 JavaScript 实现此功能。在本教程中，我们将学习如何在 HTML 中切换单个复选框和一组复选框。

语法

用户可以按照以下语法在 HTML 中切换单个复选框和一组复选框。

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

在上述语法中，checkboxes 表示组中的所有复选框。要取消选中复选框，我们可以将复选框的 checked 属性设置为 false。

示例 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>

我们学习了两个不同的示例，如何使用 JavaScript 在单个复选框和组复选框之间切换。在第一个示例中，我们使用了 click 事件，在第二个示例中，我们使用了 change 事件。