事件委托应监听change而非click以兼容label触发，通过父容器委托处理全选与选项状态同步，并利用indeterminate属性实现半选视觉反馈。
事件委托原理与复选框的特殊性
事件委托依赖事件冒泡机制，把事件监听绑定在父容器上，而不是每个复选框单独绑定。但复选框（checkbox）的点击行为有个关键点：用户点击标签（label）也能触发勾选，而 label 点击本身不会直接触发 checkbox 的 click 事件——它会先改变 checkbox 的 checked 状态，再触发 checkbox 自身的 change 事件。因此，用 click 监听容易漏掉 label 操作；更可靠的是监听 change 事件。
正确绑定 change 事件实现批量控制
将 change 事件委托到共同父级（如 ul、form 或自定义容器），在回调中判断目标是否为 checkbox，并区分是全选按钮还是普通选项：
- 检查
e.target.type === 'checkbox'确保是复选框触发 - 若目标有特定 class（如
check-all），则同步更新所有同组 checkbox 的checked状态 - 若目标是普通选项，则重新计算全选按钮状态：遍历所有选项，看是否全部勾选或全部未勾选
- 避免直接用
e.target.checked判断全选逻辑，因为 change 触发时状态已更新，可直接读取
HTML 结构建议与 JS 示例
结构保持语义清晰，全选 checkbox 放在最上方，其他选项并列：
<div id="item-list"> <label><input type="checkbox" class="check-all"> 全选</label> <label><input type="checkbox" name="item" value="1"> 选项1</label> <label><input type="checkbox" name="item" value="2"> 选项2</label> <label><input type="checkbox" name="item" value="3"> 选项3</label> </div>
JS 委托代码：
立即学习“Java免费学习笔记（深入）”；
document.getElementById('item-list').addEventListener('change', function(e) {
const target = e.target;
if (target.type !== 'checkbox') return;
const items = this.querySelectorAll('input[name="item"]');
const checkAll = this.querySelector('.check-all');
if (target === checkAll) {
// 全选/取消全选
items.forEach(cb => cb.checked = target.checked);
} else {
// 更新全选框状态
const allChecked = [...items].every(cb => cb.checked);
const isIndeterminate = [...items].some(cb => cb.checked) && !allChecked;
checkAll.checked = allChecked;
checkAll.indeterminate = isIndeterminate;
}
});
注意 indeterminate 状态的视觉反馈
浏览器原生支持 indeterminate（半选）状态，用于表现“部分勾选”。它不影响 checked 属性值，仅影响 UI 显示。设置 indeterminate = true 后，全选框会显示短横线，提升用户体验。但注意：该属性只能通过 JS 设置，不能写在 HTML 中，且设置后不会触发 change 事件。
