实现一个具有全选/反选功能的复选框的代码
时间: 2024-04-13 13:29:29 浏览: 165
以下是一个简单的实现具有全选/反选功能的复选框的 JavaScript 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>全选/反选复选框示例</title>
</head>
<body>
<h3>选择你的水果:</h3>
<input type="checkbox" id="selectAll" onchange="toggleCheckboxes()">全选<br><br>
<input type="checkbox" class="fruit">苹果<br>
<input type="checkbox" class="fruit">香蕉<br>
<input type="checkbox" class="fruit">橙子<br>
<input type="checkbox" class="fruit">草莓<br>
<input type="checkbox" class="fruit">葡萄<br>
<script>
function toggleCheckboxes() {
var checkboxes = document.getElementsByClassName("fruit"); // 获取所有水果复选框
if (document.getElementById("selectAll").checked) {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true; // 全选
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false; // 反选
}
}
}
</script>
</body>
</html>
```
这个示例中,我们首先创建了一个全选复选框,它的id是"selectAll",并且添加了一个onchange事件监听器。然后,我们创建了一组具有相同类名"fruit"的水果复选框。当全选复选框改变状态时,触发toggleCheckboxes()函数,该函数会根据全选复选框的状态来设置水果复选框的选中状态,实现全选/反选功能。
希望这个示例对你有帮助!
阅读全文