表头复选框应通过委托绑定，直接设置行复选框的checked属性而非触发click；用indeterminate模拟半选状态；扩展th点击热区提升移动端体验；每行复选框需设相同name和唯一value以确保提交正确数据。
表头复选框怎么绑定到所有行复选框？
关键不是给每个 <input type="checkbox"> 单独加事件，而是用委托 + 父容器控制。表头复选框的 onclick 事件里，直接遍历当前列或整行的复选框，统一设 checked 属性——别用 click() 触发，它不保证状态同步，且可能触发多余事件。
常见错误是：在表头 checkbox 的 change 里遍历并调用 .click()，结果部分行没选上，或者状态和 UI 不一致。正确做法是直接赋值：rowCheckbox.checked = headerCheckbox.checked。
- 确保所有行复选框有相同 class（比如
row-select），方便document.querySelectorAll('.row-select')一次性获取 - 如果表格支持分页或虚拟滚动，这个逻辑只作用于当前渲染的 DOM 节点，后加载的行需单独初始化或监听动态插入
- 不要依赖
name属性做选择器，IE 下可能行为异常；优先用class或data-*属性
如何避免全选状态和实际勾选数不一致？
用户手动勾选几行、再点全选、再取消某几行……这时表头复选框该显示“半选”还是“未选”？浏览器原生 checkbox 没有中间态，得靠 JS 模拟。核心判断逻辑是：已勾选项数 === 总行数 → 全选；已勾选项数 === 0 → 未选；否则设 indeterminate = true（注意：这仅影响视觉，不改变 checked 值）。
-
indeterminate是只读属性，只能通过 JS 设置，不能写 HTML 属性 - 每次行复选框变化时，都要重新统计：用
querySelectorAll('.row-select:checked').length比循环判断更可靠 - 记得在设置
indeterminate后，再显式设checked = false，否则某些浏览器会忽略 indeterminate 效果
移动端点击表头区域太小，怎么扩大可点击范围？
纯靠 <th> 内的 <code><input> 默认尺寸，手指容易点空。不要给 checkbox 加大 width/height（会破坏原生样式兼容性），而是用 CSS 把点击热区扩展到整个表头单元格。
- 给
<th> 设置 <code>position: relative，然后让 checkbox 绝对定位并撑满父容器：top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; - 同时加一层透明遮罩层（如伪元素
::after）也能起效，但要注意 z-index 和 pointer-events 配合 - 避免用
label包裹 checkbox 并设置display: block——在某些安卓 WebView 中，label 的 click 事件可能不触发 input change - 每行复选框的
name应该相同（如name="ids"），value设为唯一标识（如value="123"） - 表头复选框不要设
name，否则它也会被提交，造成干扰 - 若用 AJAX 提交，推荐收集所有
checked行的value成数组：Array.from(document.querySelectorAll('.row-select:checked')).map(cb => cb.value)
为什么全选后提交数据时后端收不到值？
多数情况是复选框没设 name，或设了但值都一样（比如全是 name="selected"）。浏览器只提交 checked 状态为 true 的 checkbox，且必须带 name 才会出现在表单数据中。
真正麻烦的是跨框架场景：比如表格由 Vue/React 渲染，DOM 更新和事件绑定时机错位，或者用了 Shadow DOM。这时候原生 JS 的 querySelectorAll 可能查不到节点，得改用框架提供的 ref 或生命周期钩子来同步状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
