唯一正确做法是将带name和value的checkbox直接置于内并用change事件联动状态，需严格遵循html规范、正确处理indeterminate、安全获取选中值且服务端校验。
直接在每行 <td> 里放带 <code>name 和 value 的 <input type="checkbox">，再用 change 事件联动状态——这是唯一能兼顾表单提交、JS 获取、可访问性和移动端点击可靠性的做法。
复选框必须放在 <td> 里，不能塞进 <code><tr> 或 <code><th>
<p>HTML 表格规范要求表单控件必须嵌套在 <code><td> 或 <code><th> 内部。写在 <code><tr> 开始后、没包单元格，会导致部分浏览器自动修正 DOM，但点击失效或状态不同步。
<ul>
<li>错误写法：<code><tr>
<input type="checkbox" name="item"><td>张三</td>
</tr> —— 复选框脱离语义结构，JS 查询可能漏项
<td><input type="checkbox" name="item" value="1024"></td>
<td> 是唯一能保证复选框与对应行数据绑定不漂移的容器
<h3>全选逻辑必须监听 <code>change，且手动控制 indeterminate
change 事件捕获的是状态真正变更（包括空格键、辅助设备、JS 赋值），而 click 在键盘操作时完全失效。全选框的视觉中间态（—）只能靠 JS 设置 indeterminate，它不改变 checked 值，但直接影响用户判断。
- 监听全选框：
document.querySelector('#select-all').addEventListener('change', ...) - 批量赋值用
cb.checked = this.checked，不是setAttribute('checked', ...)（后者只改 HTML 属性，不触发表单行为） - 子项变动后需重新计算：
const checkedCount = items.filter(cb => cb.checked && !cb.disabled).length；若checkedCount === 0→ 全选框checked = false；若checkedCount === totalEnabled→checked = true；否则indeterminate = true
获取已选 value 必须用 querySelectorAll('input[name="item"]:checked')
别遍历所有复选框再判断 checked，也别依赖 DOM 顺序或索引取 value——表格排序、过滤、分页后，DOM 顺序和业务数据顺序早已脱钩。
- 安全获取：
Array.from(document.querySelectorAll('input[name="item"]:checked')).map(cb => cb.value) - 这个选择器天然跳过
disabled项，无需额外过滤 - 如果后端接收数组，
name必须统一（如name="item"），否则 form 提交时不会聚合成数组 - 避免用
getElementsByClassName：返回的是实时集合，循环中修改checked可能导致跳项
动态渲染场景下，value 和 name 容易被框架清掉
Vue/React 渲染表格时，若复选框没正确绑定 key 或未显式保留 value，重绘后所有 value 可能变成默认 "on" 或空字符串，导致批量提交 ID 错乱。
- Vue 中确保：
<input type="checkbox" :name="'item'" :value="row.id">，且key基于 row.id - React 中同理：
<input type="checkbox" name="item" value="{row.id}">，避免用索引做 key - 服务端必须校验接收到的
value是否合法（比如是否为正整数、是否在允许范围内），不能直接拼 SQL - 移动端务必包裹
<label></label>或设置最小宽高，否则小方块点击区域太小，误触率高
最常被忽略的一点是：indeterminate 状态无法通过 HTML 属性初始化，也不能靠 CSS 模拟——它必须由 JS 显式设置，且一旦设为 true，后续任何对 checked 的赋值都不会自动清除它，得手动置 false。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
