复选框必须置于<td>或<th>内，name和value须设置以支持批量操作；全选逻辑需用change事件并处理indeterminate状态；移动端应包裹<label>或设min-width确保点击可靠。
复选框必须放在 <td> 里，不能直接塞进 <tr> 或 <thead>
HTML 表格的结构约束很明确：表单控件（包括 <input type="checkbox">）必须出现在 <td> 或 <th> 内部，否则语义错误，部分浏览器会自动修正但行为不可靠。常见错误是把复选框写在 <tr> 开始标签后、没包 <td>，结果点击无效或 DOM 结构混乱。
正确做法是为每行数据新增一列，专门放复选框：
<table>
<thead>
<tr>
<th><input type="checkbox" id="select-all"></th>
<th>姓名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="item" value="1"></td>
<td>张三</td>
<td>zhang@example.com</td>
</tr>
</tbody>
</table>
name 和 value 必须设置，否则 JS 获取不到选中项
批量操作依赖后端或前端收集被选中的记录 ID。如果只写 <input type="checkbox"> 不设 name，提交时字段不会出现在表单数据里；不设 value，所有复选框提交的值都是默认的 "on"，无法区分具体哪一行。
-
name统一设为相同值（如"item"），方便用document.querySelectorAll('input[name="item"]:checked')批量取值 -
value应设为该行唯一标识（如数据库 ID、UUID），避免用索引——表格排序或分页后索引就失效了 - 全选复选框建议用独立
id（如"select-all"），不要和数据行共用name，否则它也会被当成一条数据提交
全选/取消逻辑要监听 change，别用 click
用户可能通过空格键、回车或辅助工具触发复选框状态切换，click 事件会漏掉这些情况。必须用 change 事件才能可靠捕获所有状态变更。
立即学习“前端免费学习笔记（深入）”；
典型陷阱：给全选框绑定 change 后，直接用 checked 属性赋值给所有数据复选框，但没同步更新其 indeterminate 状态——当部分行被手动勾选时，全选框应显示为“半选”状态（—），否则 UI 与实际不符。
示例关键逻辑：
const selectAll = document.getElementById('select-all');
const checkboxes = document.querySelectorAll('input[name="item"]');
selectAll.addEventListener('change', () => {
checkboxes.forEach(cb => cb.checked = selectAll.checked);
// 注意：这里没处理 indeterminate，需要额外判断已勾选项数量
});
// 每个数据复选框也要监听 change，更新全选框状态
checkboxes.forEach(cb => {
cb.addEventListener('change', () => {
const checkedCount = document.querySelectorAll('input[name="item"]:checked').length;
selectAll.checked = checkedCount === checkboxes.length;
selectAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
});
});
移动端点击区域太小，必须用 <label> 包裹或设置 min-width
原生 <input type="checkbox"> 在手机上点击热区极小，用户容易点不中。单纯加 width/height 不够，因为 checkbox 是替换元素，CSS 尺寸控制有限且跨浏览器不一致。
- 推荐方案：用
<label>包裹复选框，点击文字或任意 label 区域都能触发 ——<td><label><input type="checkbox" name="item" value="1"> 选择</label></td> - 备选方案：对
input设置min-width: 24px; min-height: 24px;并配合cursor: pointer;，再用transform: scale(1.2)微调视觉大小（注意不要影响布局） - 绝对不要只靠 padding 扩大点击区 —— 某些 Android 浏览器对 checkbox 的 padding 支持异常，会导致错位或失效
