全选功能需监听表头复选框的change事件并用checked属性同步tbody内复选框状态，同时监听tbody委托的子项change事件动态设置全选框的checked和indeterminate值，并在DOM加载后立即校验初始状态。
怎样用JavaScript给表格复选框加全选功能？
直接上手：全选功能的核心是监听表头复选框的 change 事件，再批量同步所有行内复选框的 checked 状态。别用 click——它在键盘操作（空格键切换）时不会触发，而 change 更可靠。
常见错误现象：document.querySelectorAll('input[type="checkbox"]') 会把全选框自己也包含进去，导致“全选→取消→再全选”时状态错乱；或者用 setAttribute('checked', true)，但这是设置 HTML 属性，不反映实际 DOM 状态，后续读 el.checked 仍为 false。
- 全选框建议放在
<thead>的第一个<th>内，行复选框统一放在<tbody>的每个<td>中 - 获取目标复选框时，用
document.querySelectorAll('tbody input[type="checkbox"]')明确排除表头 - 赋值必须用
el.checked = true/false，不是setAttribute或className - 监听事件绑定在全选框上，不要用事件委托——简单场景没必要，反而容易漏掉初始状态同步
如何让“全选框”自动响应子项勾选状态？
用户手动勾选部分行后，全选框应该变成“半选”（indeterminate）或“未全选”。浏览器原生支持 indeterminate 状态，但它只是视觉提示，不影响 checked 值，且必须通过 JS 设置，不能靠 HTML 属性。
关键点：每次子复选框变化时，要重新计算已勾选项数量。不能只靠“全选/全不选”二值判断——那是错误逻辑。
立即学习“前端免费学习笔记（深入）”；
- 监听所有行复选框的
change事件（推荐委托到tbody，避免重复绑定） - 统计
checked为true的个数：const checkedCount = [...rows].filter(cb => cb.checked).length - 若
checkedCount === 0→ 全选框checked = false，indeterminate = false - 若
checkedCount === rows.length→ 全选框checked = true，indeterminate = false - 否则 →
checked保持false，设indeterminate = true
为什么用 querySelectorAll 而不用 getElementsByName？
因为 name 属性容易重复或缺失，且 getElementsByName 返回的是 HTMLCollection，不支持展开运算符和 filter；而 querySelectorAll 返回静态 NodeList，可直接转数组、链式调用，语义也更清晰——我们找的是“tbody 里的 checkbox”，不是“叫 xxx 的元素”。
兼容性影响：现代浏览器都支持；IE8+ 也支持 querySelectorAll，但若需支持 IE7，得改用 getElementsByTagName('input') + 手动遍历 type 和位置，不推荐。
- 确保每行复选框没有
name="selectAll"这类和全选框冲突的命名 - 避免给复选框加
id（除非必要），ID 重复会导致getElementById行为不可控 - 如果表格是动态渲染的（如 Vue/React），事件监听必须在节点挂载后执行，或使用事件委托
全选逻辑里最容易被忽略的细节是什么？
初始状态不同步。页面加载后，如果某些行复选框默认是 checked（比如服务端返回了已选中数据），但全选框仍是未勾选状态，用户第一眼就会觉得功能失效。
解决办法很简单：DOM 加载完立即运行一次“子项状态检查”，主动设置全选框的 checked 和 indeterminate。别指望靠用户第一次点击来触发。
另一个坑：表格可能有分页或虚拟滚动，querySelectorAll 只能拿到当前渲染的行。这时候全选就不是“全表”，而是“当前页”——必须在业务层明确约定并告知用户，否则就是误导。
