极客教程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>
我们学习了两个不同的例子，用JavaScript在单选框和组选框之间进行切换。在第一个例子中，我们使用了点击事件，而在第二个例子中，我们使用了改变事件。