<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check All Example</title>
</head>
<body>
<input type="checkbox" id="checkAll"> Check All
<br>
<input type="checkbox" class="checkbox"> Item 1
<br>
<input type="checkbox" class="checkbox"> Item 2
<br>
<input type="checkbox" class="checkbox"> Item 3
<br>
<script>
var checkAll = document.getElementById('checkAll');
var checkboxes = document.querySelectorAll('.checkbox');
// 全选/全不选功能
checkAll.addEventListener('change', function() {
checkboxes.forEach(function(checkbox) {
checkbox.checked = checkAll.checked;
});
});
// 每个复选框改变时检查是否所有复选框都被选中
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var allChecked = true;
checkboxes.forEach(function(checkbox) {
if (!checkbox.checked) {
allChecked = false;
}
});
checkAll.checked = allChecked;
});
});
</script>
</body>
</html>在这个示例中，我们首先获取全选复选框和所有子复选框的元素，然后为全选复选框和每个子复选框添加事件监听器。当全选复选框的状态改变时，我们将所有子复选框的状态设置为与全选复选框相同。当任何一个子复选框的状态改变时，我们检查是否所有子复选框都被选中，如果是则将全选复选框设置为选中状态，否则设置为未选中状态。
这样就实现了简单的全选和全不选功能。你可以根据自己的需求对代码进行定制和扩展。