表头复选框必须用 change 事件绑定，避免漏掉键盘操作；推荐通过 name="row-select" 精准获取行复选框，用 cb.checked = event.target.checked 赋值，并在行复选框 change 时同步更新表头 checked 和 indeterminate 状态。
表头复选框怎么绑定 change 事件才不丢状态
直接用 onclick 容易漏掉键盘操作（比如空格键切换），必须用 change 事件。别写成 click，否则用户用 Tab 键聚焦后按空格，checked 状态变了但事件没触发。
实操建议：
- 给表头复选框加明确标识，比如
id="select-all"或name="select-all" - 用
document.getElementById("select-all").addEventListener("change", handler)绑定 - handler 里读
event.target.checked，不是getAttribute("checked")——后者只返回初始 HTML 属性值，不是当前真实状态
批量设置行复选框 checked 的安全写法
常见错误是用 getElementsByTagName("input") 然后遍历判断 type，容易把表单其他 checkbox 也拉进来；或者用 querySelectorAll("tr input[type=checkbox]")，但若某行有多个 checkbox（比如操作列也有），就会误操作。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 所有待控制的行复选框统一加
name="row-select"（不要依赖 class） - 用
document.querySelectorAll('input[name="row-select"]')获取目标集合，精准且语义清晰 - 赋值时直接写
cb.checked = event.target.checked，别用setAttribute("checked", ...)—— 后者不触发 DOM 状态更新，UI 不同步
反选逻辑为什么不能只取 !checked
“反选”不是全选的逆操作。全选状态下点反选 → 全取消；但部分勾选时点反选，应该是每行状态翻转，不是全部设为 false。
所以反选必须逐个处理：
- 先获取所有
input[name="row-select"] - 遍历每个，执行
cb.checked = !cb.checked - 注意检查
cb.disabled，跳过禁用项，避免报错或状态错乱 - 最后重新统计已勾选数，同步更新表头
indeterminate状态
行复选框变化后如何反向同步表头状态
用户手动勾/取消某一行，表头复选框必须响应：全勾 → 勾上；全不勾 → 取消；否则设 indeterminate = true。这个逻辑常被忽略，导致 UI 和实际状态不一致。
关键点：
- 给所有行复选框统一绑定
change事件（建议用事件委托到tbody，防动态插入） - 每次触发后，统计：
const checked = document.querySelectorAll('input[name="row-select"]:checked').length const total = document.querySelectorAll('input[name="row-select"]').length- 然后：
selectAll.checked = checked === total；selectAll.indeterminate = checked > 0 && checked - 注意：设
indeterminate前先selectAll.checked = false，否则某些浏览器会忽略
indeterminate”。很多 bug 都是因为忘了在全勾/全空时主动清除它。 
