复选框必须置于或内，name需统一、value须为唯一标识，全选框用id单独控制，监听change事件并手动设置checked，禁用项自动过滤，选中值应从:checked复选框读取value，移动端用包裹扩大点击区域。
复选框必须放在 <td> 里，不能直接塞进 <code><tr> 或 <code><thead><p>浏览器会丢弃或错位 <code><tr> 内部未包裹在 <code><td> 或 <code><th> 中的 <code><input type="checkbox">。常见错误是写成：<tr>
<input type="checkbox"><td>张三</td>
</tr>——这个复选框根本不会渲染出来。
正确做法是为“控制列”单独设一列，每行一个 <td>，里面只放复选框：
<pre class="brush:php;toolbar:false;"><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="1024"></td>
<td>张三</td>
<td>zhang@example.com</td>
</tr></tbody></pre>
<ul>
<li>
<code>name 必须统一（如 "item"），否则 document.querySelectorAll('input[name="item"]:checked') 拿不到全部
value 必须是业务唯一标识（如数据库 ID），别用 index 或空字符串id="select-all"，不共用 name，避免被当数据项提交
change 事件才是可靠监听方式，click 会漏掉键盘操作
用户按空格、回车、或用屏幕阅读器切换复选框时，click 事件完全不触发。只有 change 能捕获所有真实状态变更。
全选框绑定 change 后，别用 .click() 模拟点击；直接赋值 .checked：
document.getElementById('select-all').addEventListener('change', e => {
const isChecked = e.target.checked;
document.querySelectorAll('tbody input[name="item"]').forEach(cb => {
cb.checked = isChecked;
});
});
- 行内复选框也要监听
change，用于反向更新全选框状态 - 计算已勾选项数时，只统计
cb.checked === true的项，disabled复选框自动被排除 - 设置
indeterminate状态只能靠 JS：selectAllEl.indeterminate = (checkedCount > 0 && checkedCount
获取选中值必须从复选框本身读 value，不能依赖 DOM 顺序
表格可能分页、搜索过滤、拖拽排序，document.querySelectorAll('tbody tr') 的顺序 ≠ 数据原始顺序。如果按索引取 dataset.id，很容易提交错 ID。
正确做法是从已勾选的复选框出发，只读它的 value 或 dataset.id：
function getSelectedIds() {
return Array.from(
document.querySelectorAll('input[name="item"]:checked')
).map(cb => cb.value);
}
- 禁用的复选框（
disabled）不会出现在:checked伪类中，天然过滤 - 避免用
getElementsByName—— 返回实时集合，循环中修改checked可能跳项 - 后端接收时，要校验每个
value是否合法（防篡改、越权）
移动端点击区域小？用 <label></label> 包裹复选框
原生 <input type="checkbox"> 点击热区只有几像素，移动端极易点空。直接设 width/height 会破坏语义和可访问性。
标准解法是用 <label></label> 包裹，并配合 CSS 扩大响应区域：
<td>
<label style="display: block; text-align: center;">
<input type="checkbox" name="item" value="1024"></label>
</td>
-
label默认激活关联控件，点击任意位置都等效于点复选框 - 加
style="min-width: 36px; min-height: 36px"确保触控友好（iOS/Android 最小推荐尺寸） - 不要给
input设margin或padding，会影响对齐；统一控制td的padding
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
