应监听 change 事件而非 click，因空格键、屏幕阅读器等辅助操作仅触发 change；表头复选框用 id 绑定 change 监听，读取 event.target.checked；行复选框统一 class，用 querySelectorAll 获取并直接赋值 cb.checked；反选需遍历翻转每项并派发 change 事件；部分选中时设 headerCb.indeterminate = true 且 checked = false。
表头复选框怎么监听 change 而不是 click
用户用空格键切换、屏幕阅读器操作或辅助设备触发时，click 事件可能不触发，但 change 一定会——这才是语义正确的监听点。别写 onclick="toggleAll()"，也别用 addEventListener('click', ...)。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给表头复选框加唯一标识，比如
id="check-all" - 用
document.getElementById('check-all').addEventListener('change', handleCheckAll) -
handleCheckAll里读event.target.checked，不是getAttribute('checked')（后者只返回初始 HTML 属性） - 避免在事件回调里重复绑定，否则动态插入行后会出问题
tbody 中的复选框怎么批量获取和设状态
别用 getElementsByTagName('input') 或遍历 tr 再找子元素——结构一变就漏控件；也别用 setAttribute('checked', 'checked')，它只改属性不更新 DOM 状态，:checked 伪类和 JS 的 .checked 值都不同步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每行复选框统一加
class="row-checkbox"或name="row-select" - 用
document.querySelectorAll('.row-checkbox')获取全部目标元素 - 循环设
cb.checked = event.target.checked，这是 DOM 属性，UI 和事件都响应 - 如果表格行数超 500，考虑用
requestIdleCallback分片处理，避免卡顿
反选逻辑为什么不能只取 !headerCb.checked
全选状态下点“反选”，确实该全不选；但若当前是部分勾选（比如 10 行里选了 3 行），再点反选，应把已勾的变未勾、未勾的变已勾——这时候不能直接拿表头 checkbox 的 checked 值取反，得逐个翻转每行的状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 反选函数里遍历所有
.row-checkbox，对每个执行cb.checked = !cb.checked - 遍历前先校验
cb是否存在（防止某行没复选框导致Cannot set property 'checked' of null） - 翻转后手动触发一次
cb.dispatchEvent(new Event('change'))，确保行级监听逻辑能响应 - 别在反选里调用全选逻辑，二者状态更新路径不同，混用容易错乱
表头复选框的 indeterminate 状态怎么手动维护
当用户手动勾选/取消部分行时，表头复选框不能只保持 true 或 false，必须进入中间态（三态）：全选 → checked=true，全不选 → checked=false，部分选中 → checked=false 且 indeterminate=true。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次行复选框变化后，统计：
const checked = document.querySelectorAll('.row-checkbox:checked').length - 设表头状态：
headerCb.checked = (checked === total)，headerCb.indeterminate = (checked > 0 && checked -
indeterminate是只读属性，必须直接赋值，不能用setAttribute - 别忘了在全选/反选后也重新计算并设置
indeterminate，否则状态滞后
id 重复的复选框导致 getElementById 只取到第一个；还有就是把 value 当成业务 ID 用，结果遇到纯数字 ID（如 0）被转成 false 导致数据丢失。用 dataset.rowId 更稳。 
