必须监听change事件而非click，因change能捕获所有状态变更（含label点击、空格触发等），且iOS/Safari下click不触发label；全选框需用element.checked和element.indeterminate配合实现全选/半选/未选三态，并排除disabled项与自身。
表头复选框全选功能必须监听 change 事件，用 element.checked = boolean 直接赋值，不能依赖 click 或 setAttribute —— 否则 iOS/Safari 下点 label 不触发、状态不同步、DOM 更新失效。
为什么 change 事件比 click 更可靠
复选框的 click 在 Safari 和部分 iOS Webview 中，点击关联的 <label> 标签时可能不触发；但 change 保证只要状态真正改变（无论怎么触发）就响应。另外，手动调用 checkbox.click() 可能引发重复触发或死循环，而 change 是声明式监听，更安全。
常见错误现象：Uncaught TypeError: Cannot set property 'checked' of null，往往是因为用了 getElementsByTagName("input") 拿到一堆无关控件，或没过滤掉 disabled 复选框导致取到 null。
- 统一用
document.querySelectorAll('input[name="item"]')获取目标复选框，name 分组语义清晰、性能好、不易误选 - 全选框自身不要参与分组，比如它的
name设为"select-all"，避免和数据项混淆 - 批量赋值前先缓存 NodeList：
const items = document.querySelectorAll('input[name="item"]');，避免每次操作都重新查 DOM
全选框怎么正确反映“部分选中”状态
用户只勾了 3 行中的 2 行时，全选框既不该打勾也不该为空——得设成 indeterminate 状态，这是原生语义，且可被 CSS 识别（input:indeterminate）。
立即学习“前端免费学习笔记（深入）”；
注意：设置 indeterminate 不会改变 checked 值，且必须显式重置：selectAll.indeterminate = false 再设 checked，否则残留中间态。
- 监听每个子复选框的
change，统计checked数量 - 全勾 →
selectAll.checked = true; selectAll.indeterminate = false; - 全不勾 →
selectAll.checked = false; selectAll.indeterminate = false; - 部分勾 →
selectAll.indeterminate = true; selectAll.checked = false;（checked必须设为false，否则视觉错乱）
反选逻辑为什么不能只对全选框取反
反选按钮（或“反选”文字链接）的点击，不是要翻转全选框本身的状态，而是要逐个翻转所有数据行复选框的状态。如果直接写 items.forEach(cb => cb.checked = !cb.checked)，看起来没问题，但容易漏掉两个关键点：
- 必须排除全选框自身：
items.forEach(cb => { if (cb.name !== "select-all") cb.checked = !cb.checked; }) - 反选后必须重新校验全选框状态——调用一次上面的“部分选中”统计逻辑，否则
indeterminate不更新，UI 脱节 - 不要用
getAttribute("checked")判断原始状态，它返回的是 HTML 属性值（静态），应始终读cb.checked（实时 DOM 属性）
动态表格或大量数据时要注意什么
如果表格是 JS 动态渲染（比如 Vue/React 渲染后注入），或行数超 500 条，直接遍历 querySelectorAll + forEach 会卡顿。此时应：
- 改用事件委托：给
<tbody>绑定click，用event.target.matches('input[name="item"]')判断是否命中，避免重复绑定 - 对反选等批量操作加
requestIdleCallback或简单防抖（尤其在频繁操作场景） - 后端提交时，别靠 name 数组自动收集（如
name="ids[]"），优先用dataset.id或value提取 ID，再拼成数组传 JSON，避免表单编码歧义
最易被忽略的一点：全选框的 indeterminate 状态不会自动同步到表单提交值里，它纯属 UI 辅助。你永远要靠 JS 主动收集 input[name="item"]:checked 的 value 才能得到真实选中项——别指望浏览器替你“猜”。
