数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何在HTML中在一个复选框和一组复选框之间切换？
切换意味着，每当用户选中一个复选框时，组中的所有复选框都应取消选中；而当用户选中组中的任何复选框时，单个复选框应取消选中。我们可以用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` 事件。
2K+ 次浏览
