Web前端：全选框的使用

 整体代码：

<div><input type="checkbox" id="check-all" /><label for="check-all">全选</label></div><div><input type="checkbox" class="checkbox-item" /><label >选项1</label><input type="checkbox" class="checkbox-item" /><label >选项2</label><input type="checkbox" class="checkbox-item" /><label >选项3</label></div><script>document.addEventListener('DOMContentLoaded', function () {var checkAll = document.getElementById('check-all');var checkboxes = document.querySelectorAll('.checkbox-item')function updateCheckAll() {var checkedCount = 0;checkboxes.forEach(function (checkbox) {if (checkbox.checked) checkedCount++});checkAll.checked = checkedCount === checkboxes.length;checkAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;}checkAll.addEventListener('change', function () {checkboxes.forEach(function (checkbox) {checkbox.checked = checkAll.checked;});checkAll.indeterminate = false;});checkboxes.forEach(function (checkbox) {checkbox.addEventListener('change', updateCheckAll);})})</script>

1. HTML结构部分

<div><input type="checkbox" id="check-all" /> <!-- 全选复选框 --><label for="check-all">全选</label> <!-- 全选标签 -->
</div><div><input type="checkbox" class="checkbox-item" /> <!-- 选项1 --><label>选项1</label><input type="checkbox" class="checkbox-item" /> <!-- 选项2 --><label>选项2</label><input type="checkbox" class="checkbox-item" /> <!-- 选项3 --><label>选项3</label>
</div>

• <div>：分组容器

• <input type="checkbox">：复选框元素

• id="check-all"：全选按钮的唯一标识

• class="checkbox-item"：三个选项的共同类名（用于批量选择）

• <label>：点击文字也能操作复选框（for属性需匹配id）

2. JavaScript核心逻辑 

document.addEventListener('DOMContentLoaded', function () {// 等待页面加载完成再执行代码
});

• addEventListener：向指定的元素添加事件监听器

• 重要：防止在DOM元素未加载前操作它们

3. 获取DOM元素

var checkAll = document.getElementById('check-all'); // 获取全选按钮
var checkboxes = document.querySelectorAll('.checkbox-item'); // 获取所有选项

• getElementById()：通过id获取单个元素

• querySelectorAll()：通过CSS选择器获取元素集合（返回NodeList）

• 变量作用：

  • checkAll：控制全选的复选框

  • checkboxes：包含三个选项的数组

4. 更新全选状态函数

function updateCheckAll() {var checkedCount = 0; // 计数器：已选中的选项数// 遍历所有选项checkboxes.forEach(function (checkbox) {if (checkbox.checked) checkedCount++; // 如果选中则计数+1});// 设置全选框状态：checkAll.checked = (checkedCount === checkboxes.length); // 全部选中时打勾checkAll.indeterminate = (checkedCount > 0 && checkedCount < checkboxes.length); // 部分选中时显示"-"状态
}

• 核心逻辑：

  1. 遍历每个选项，统计被选中的数量

  2. 三种状态处理：

     • 全选：选中数 = 总数 → checked=true

     • 全不选：选中数 = 0 → checked=false

     • 部分选：0 < 选中数 < 总数 → indeterminate=true（显示横线"-"状态）

 5. 全选按钮事

checkAll.addEventListener('change', function () {// 当全选框状态变化时checkboxes.forEach(function (checkbox) {checkbox.checked = checkAll.checked; // 所有选项同步全选框状态});checkAll.indeterminate = false; // 强制取消"-"状态（全选/全不选时）
});

• 用户操作：点击"全选"复选框时触发

• 执行动作：

  1. 遍历所有选项，设置为全选框的当前状态

  2. 重置indeterminate属性（全选/全不选时不需要"-"状态）

6. 单个选项事件绑定 

checkboxes.forEach(function (checkbox) {checkbox.addEventListener('change', updateCheckAll); // 选项变化时更新全选框状态
});

• 循环绑定：为每个选项添加change事件监听

• 事件响应：当任意选项状态改变时，调用updateCheckAll()重新计算全选框状态