这段代码实现的功能是一个简单的复选框示例，它可以进行全选、反选和取消选中操作。
实现功能：
1. 全选：当点击标签"全选"旁边的复选框时，该页面上所有具有"item"类的复选框都会被选中（或者取消选中，如果它们之前都被选中了）。
2. 反选：当点击"反选"按钮时，当前的复选框会反转它们的选中状态。如果一个选项被选中了，点击按钮后它就会被取消选中；如果一个选项未选中，点击按钮后它就会被选中。
3. 取消选中：当点击"取消选中"按钮时，所有具有"item"类的复选框都会被取消选中，并且"全选"复选框也会自动被取消选中，表示整个列表中没有任何选项被选中。
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选、反选、取消选中</title>
<style>
div {
border: 1px solid #000;
width: 260px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>复选框选择示例</h1>
<label>
<input type="checkbox" id="selectAll"> 全选
</label>
<div>
<label>
<input type="checkbox" class="item"> 选项 1
</label>
<label>
<input type="checkbox" class="item"> 选项 2
</label>
<label>
<input type="checkbox" class="item"> 选项 3
</label>
</div>
<button id="invertSelection">反选</button>
<button id="clearSelection">取消选中</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item');
const invertButton = document.getElementById('invertSelection');
const clearButton = document.getElementById('clearSelection');
// 全选功能
selectAllCheckbox.addEventListener('click', function() {
itemCheckboxes.forEach(checkbox => {
checkbox.checked = selectAllCheckbox.checked;
});
});
// 反选功能
// invertButton.addEventListener('click', function() {
// itemCheckboxes.forEach(checkbox => {
// checkbox.checked = !checkbox.checked;
// });
// selectAllCheckbox.checked = false; // 同时取消全选
// });
// 反选功能
invertButton.addEventListener('click', function() {
let allUnchecked = true; // 检查是否所有复选框未选中
itemCheckboxes.forEach(checkbox => {
if (checkbox.checked) {
allUnchecked = false; // 只要有一个复选框选中，就不是全部未选中
}
checkbox.checked = !checkbox.checked; // 反选操作
});
// 如果全部未选中，则选中全选
selectAllCheckbox.checked = allUnchecked;
});
// 取消选中功能
clearButton.addEventListener('click', function() {
itemCheckboxes.forEach(checkbox => {
checkbox.checked = false;
});
selectAllCheckbox.checked = false; // 同时取消全选
});
});
</script>
</body>
</html>部分代码解析：
// 全选功能
selectAllCheckbox.addEventListener('click', function() {
itemCheckboxes.forEach(checkbox => {
checkbox.checked = selectAllCheckbox.checked;
});
});这段JavaScript代码是关于一个“全选”复选框（selectAllCheckbox）的功能。当用户点击这个“全选”复选框时，它会触发一个事件，这个事件会遍历一个复选框数组（itemCheckboxes），并将数组中每个复选框的选中状态（checked）设置为与“全选”复选框的选中状态相同。
下面是代码的详细解析：
selectAllCheckbox.addEventListener('click', function() {...});- 这行代码给
selectAllCheckbox（代表“全选”复选框的元素）添加了一个点击事件监听器。当用户点击这个复选框时，会执行提供的函数。
itemCheckboxes.forEach(checkbox => {...});- 这行代码使用
forEach方法来遍历itemCheckboxes数组。itemCheckboxes很可能是一个包含页面上其他复选框元素的数组。
checkbox.checked = selectAllCheckbox.checked;- 在
forEach的回调函数内部，这行代码将每个checkbox（即itemCheckboxes数组中的每个元素）的checked属性设置为selectAllCheckbox的checked属性值。换句话说，它确保了当“全选”复选框被选中或取消选中时，数组中的所有其他复选框也会被相应地选中或取消选中。
