HTML表格每行加复选框应直接置于<td>内，用唯一name="row-select"、data-row-id标识业务主键，避免id重复和内联JS；全选逻辑需双向同步：监听行复选框change事件动态更新表头复选框的checked与indeterminate状态。
怎么给 HTML 表格每行加复选框
直接在 <tr> 对应的 <td> 里放 <input type="checkbox">，别套 <label> 或额外容器——浏览器默认聚焦行为和 JS 事件绑定都更稳。注意给每个 input 加唯一 name（比如 name="row-select"），否则全选逻辑会失效。
常见错误是把复选框塞进 <th> 却忘了设 scope，导致屏幕阅读器无法关联行数据；或者用 id 重复（比如所有复选框都叫 cb-1），后续用 document.getElementById 只能取到第一个。
- 复选框放在第一列或最后一列，视觉上更符合用户预期
- 给
input加data-row-id属性，值为该行业务主键（如data-row-id="1024"），比靠 DOM 索引取数据更可靠 - 避免用
onclick="toggleRow(this)"写内联 JS，统一用addEventListener('change', ...)
全选/取消全选怎么同步状态
监听表头复选框的 change 事件，用 querySelectorAll('input[name="row-select"]') 批量设 checked 属性，而不是遍历 <tr> 再找子元素——前者快且不依赖 DOM 结构变化。
关键点在于「反向同步」：当用户手动取消某一行时，如果其他行全被勾选，表头复选框必须自动变为未勾选态；反之，如果手动勾选了最后一行，表头复选框要自动变勾选。不能只靠「全选按钮点击」单向控制。
立即学习“前端免费学习笔记（深入）”；
- 每次行复选框变化后，统计已勾选项数量：
const checked = document.querySelectorAll('input[name="row-select"]:checked').length - 用
checked.length === total判断是否全选，用checked.length === 0判断是否全空 - 表头复选框的
indeterminate状态要手动设：headerCb.indeterminate = (checked > 0 && checked
获取选中行数据的三种安全方式
别用 parentNode.parentNode 向上找 <tr> —— 任意加个 <div> 或调整 HTML 就崩。优先用结构化数据源，其次用语义化属性。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
假设表格渲染前已有原始数组 rows = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]：
- 最稳：点击复选框时，读取它的
dataset.rowId，再从rows中find对应对象 - 次稳：用
closest('tr')获取父行，再用row.dataset.rowId（前提是渲染时给<tr>也加了data-row-id） - 慎用：靠
row.cells[1].textContent取第二列文本——列顺序一调、加个<span>包裹就出错
如果数据来自后端 JSON，建议在生成 HTML 时就把完整对象序列化进 data-row-json 属性（注意转义），避免前端再拼字段。
IE11 兼容和移动端点击区域问题
IE11 不支持 closest() 和 dataset，得用 getAttribute('data-row-id') 替代；querySelectorAll(...:checked) 在 IE11 是支持的，但 :indeterminate 不支持，表头状态只能靠 checked + 文字提示弥补。
移动端点复选框太小，容易误触。不要只加 width/height，而要用 transform: scale(1.5) 配合 transform-origin，同时保留原点击热区。或者直接给 <td> 加 onclick 并阻止事件冒泡，内部 input 用 click() 触发。
- Android Chrome 旧版对
input[type=checkbox]的change事件触发有延迟，加touchstart作为补充 - 避免用
label[for]关联复选框——iOS Safari 在某些 zoom 比例下会失焦 - 如果表格可滚动，确保复选框状态在虚拟滚动（如
react-window）中正确持久化，而非只渲染视口内 DOM
多选功能真正的复杂点不在勾选本身，而在「状态一致性」：DOM 状态、JS 数据状态、UI 反馈（比如已选数量 badge）、以及翻页/搜索后的记忆恢复。这些地方没对齐，用户就会觉得“刚选的怎么没了”。
