用事件委托实现全选联动最高效健壮：监听table点击，通过target.matches区分.check-all和.check-item，同步状态并支持indeterminate半选态，动态增删行无需重绑事件。
在表格中实现全选复选框联动子项，用事件委托是最高效、最健壮的方式——避免为每个子复选框单独绑定事件，也兼容后续动态插入的行。
核心思路：监听表体（tbody）或表格（table）的 click 事件
全选框通常放在表头（thead），子项在 tbody 中。不直接给每个 <input type="checkbox"> 绑事件，而是把事件监听器挂到它们的共同父容器（如 tbody 或 table）上，通过 event.target 判断点击的是哪个元素。
HTML 结构要清晰，便于识别目标元素
建议给全选框加一个明确 class（如 check-all），子复选框统一用 class（如 check-item），并确保它们都在同一个逻辑容器内：
| 姓名 | 邮箱 | |
|---|---|---|
| 张三 | z3@example.com | |
| 李四 | l4@example.com |
JavaScript 实现：委托 + 状态同步
监听 tbody 的 click，但也要处理全选框（在 thead 中）的点击，所以更稳妥是监听整个 table；再用事件代理区分目标：
- 如果点击的是
.check-all，就同步所有.check-item的checked状态 - 如果点击的是
.check-item，就检查所有子项是否全选/全不选，来更新.check-all的状态 - 注意使用
closest()或直接判断target.matches()防止误触文字或 td
示例代码：
const table = document.getElementById('userTable');
const checkAll = table.querySelector('.check-all');
const items = table.querySelectorAll('.check-item');
table.addEventListener('click', (e) => {
const target = e.target;
if (target.matches('.check-all')) {
const checked = target.checked;
items.forEach(cb => cb.checked = checked);
}
if (target.matches('.check-item')) {
const allChecked = [...items].every(cb => cb.checked);
const isIndeterminate = [...items].some(cb => cb.checked) && !allChecked;
checkAll.checked = allChecked;
checkAll.indeterminate = isIndeterminate;
}
});
小提示：设置 indeterminate 可以让全选框显示“半选”状态（视觉反馈更准确），它不影响 checked 值，仅用于 UI。
补充：支持动态增删行时的稳定性
因为事件委托监听的是父级，新插入的 .check-item 无需重新绑定事件，只要符合 class 规则，自动生效。只需确保新增行插入到已监听的 tbody 内即可。
如果后续需要批量获取选中值，可随时用 document.querySelectorAll('.check-item:checked') 提取，与事件逻辑解耦。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
