复选框必须置于内且用label包裹，绑定change事件并配合data-id管理状态。错误做法包括直接放/、用click事件、依赖DOM顺序取值；正确方案是每行独立、center对齐、全选逻辑基于checked属性与indeterminate视觉态、移动端通过label扩大点击区域。
复选框必须放在 <td> 里，不能直接塞进 <code><th> 或 <code><tr><p>很多新手会把 <code><input type="checkbox"> 直接写在 <th> 标签外，或者试图用 CSS 把它“撑满”整个单元格，结果点击区域极小、状态不同步。正确做法是：每个复选框都包裹在独立的 <code><td> 中，并设置 <code>text-align: center 对齐。
常见错误现象：click 事件只在 checkbox 小方块上生效，旁边空白区域点不动；全选按钮勾选后，部分行没响应。
- 确保每行数据对应一个
<tr>，且每行第一个 <code><td> 放复选框，不要合并单元格（<code>colspan/rowspan会破坏绑定逻辑） - 给复选框加
name属性（如name="selectedIds"），方便后续用form.elements或querySelectorAll批量取值 - 避免给复选框设
id—— 动态生成多行时易重复，改用data-id存业务主键更安全 - 全选框绑定
change事件，读取其checked状态，再批量赋值给所有行内复选框的checked属性（注意：用.checked = value，不是.setAttribute('checked', ...)） - 每行列复选框也要绑定
change，用于实时更新“全选框”的状态：统计所有行中checked === true的数量，等于总行数则全选框勾上，为 0 则取消，否则设为indeterminate -
indeterminate是视觉中间态，只能通过 JS 设置，不能靠 HTML 属性，且不会触发change事件，需单独判断 - 推荐结构：
<input type="checkbox" name="selectedIds" value="1024" data-id="1024">，这样form.selectedIds可直接取到数组，或用Array.from(form.selectedIds).map(cb => cb.value) - 避免用
getElementsByClassName—— 返回的是实时集合，循环中修改checked可能导致跳项；优先用querySelectorAll('input[type=checkbox]:checked') - 如果表格行数超千条，别在每次 change 都遍历全部 checkbox，改用计数器 + 单次更新全选状态
全选/反选逻辑要监听 change 而不是 click
用 click 事件处理全选框，会导致按空格键切换时失效（键盘用户或辅助设备无法触发），而且在某些浏览器中，鼠标快速连点可能触发两次 click 但只触发一次 change，造成状态错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
批量操作前务必校验哪些行被选中，而不是依赖 DOM 顺序
表格可能有分页、搜索过滤、排序，DOM 中的 <tr> 顺序 ≠ 数据原始顺序。如果直接遍历 <code>document.querySelectorAll('tbody tr') 并按索引取 data-id，很容易提交错误 ID。
正确做法是：只从已勾选的复选框出发，读取它的 dataset.id 或 value。
移动端点击区域太小？加一层透明 <label></label> 包裹
原生 checkbox 在 iOS 和部分安卓浏览器上点击热区不足 44×44px，不符合可访问性要求，也容易点歪。
最轻量解法：不用额外 JS，纯 HTML/CSS：
<td>
<label style="display: block; padding: 8px;">
<input type="checkbox" name="selectedIds" value="1025" data-id="1025">
</label>
</td>
这样整个 <td> 内部都是可点击区域，且保持语义正确（<code>label 关联 checkbox 后，点击 label 也会触发 checkbox 切换）。
注意：for 和 id 不必配对——用嵌套方式关联更简洁，也规避了动态 ID 冲突问题。
真正麻烦的不是加复选框，而是保证它在过滤、排序、分页、编辑行后仍能准确映射数据；data-id 和 change 事件的组合，比任何 UI 框架的“选中态管理”都更可控，但也更容错率低——少设一个 data-id，就可能删错一行。
