表头复选框应绑定 change 事件监听，用 addeventlistener('change', ...) 并通过 e.target.checked 获取状态；tbody 行复选框用 queryselectorall 精准定位并批量赋值；indeterminate 状态需手动维护：根据已选数与总数关系同步设置 checked 和 indeterminate。
表头复选框怎么绑定 change 事件
直接监听 change，不是 click 或 input —— 后两者在键盘操作（空格键切换）时可能漏触发，change 是语义上最准确的时机。
别用内联 onclick="toggleAll()"，统一用 addEventListener('change', ...)；给表头复选框加唯一标识，比如 id="check-all" 或 data-control="select-all"，避免靠 DOM 位置硬找。
document.getElementById('check-all').addEventListener('change', e => { ... })- 不要用
getAttribute('checked')判断状态——它返回 HTML 初始值，要用e.target.checked - 如果表格是动态渲染的（如 Vue/React 渲染后插入），确保事件绑定发生在 DOM 真正就绪之后，比如在
DOMContentLoaded或框架的mounted钩子中
怎么批量设置 tbody 中所有行复选框
用 querySelectorAll 精准定位，别遍历 tr 再找 input —— 嵌套结构、disabled 复选框、或中间插了其他元素都会导致漏选或报错。
推荐写法：document.querySelectorAll('tbody input[name="row-select"]:not([disabled])')，这样既按业务分组（name），又自动过滤掉禁用项。
- 赋值用
box.checked = e.target.checked，不是box.setAttribute('checked', ...)—— 后者只改属性，不改实际状态 - 大量复选框（>500 行）时，避免同步循环阻塞主线程，可考虑
requestIdleCallback分批处理，但多数场景下直接遍历足够快 - 如果某行复选框没有
name="row-select"，它就不会被控制——这是设计上的隔离，不是 bug
为什么全选框会卡在 indeterminate 状态不更新
indeterminate 是手动设置的视觉态，浏览器不会自动推断。它只影响外观，不影响 checked 值，但用户看到“横杠”就会知道“部分选中”，这个反馈必须由 JS 主动维护。
每次任意一行复选框变化后，都要重新计算：
- 统计已勾选数：
const checked = document.querySelectorAll('input[name="row-select"]:checked').length - 总数：
const total = document.querySelectorAll('input[name="row-select"]').length - 设状态：
headerCb.checked = checked === total; headerCb.indeterminate = checked > 0 && checked - 注意顺序：先设
indeterminate = false，再设checked，否则indeterminate可能残留
反选功能容易踩的三个坑
反选不是简单地对每个复选框执行 !box.checked，稍不注意就会让全选框也被翻转、或漏掉 disabled 项、或破坏三态逻辑。
- 明确排除全选框本身：
document.querySelectorAll('tbody input[name="row-select"]:not([disabled])')，别用querySelectorAll('input')全局查 - 翻转后必须重新触发状态同步逻辑（即上面的
checked和indeterminate计算），不能只改行复选框 - 别调用
click()或dispatchEvent模拟点击——这会再次触发 change 事件，造成死循环；直接赋值box.checked = !box.checked即可
真正麻烦的是跨框架或动态加载表格时的状态重置——DOM 存在但 JS 作用域丢失，name 冲突，或者多个表格共用同一组事件监听器。这些没法靠一套代码兜底，得靠命名隔离和作用域封装。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
