推荐使用 queryselectorall('input[name="item_id"]:checked') 直接获取已勾选复选框，避免 getelementsbyname 遍历漏状态、dom 未就绪及动态渲染问题，并注意 form.elements.selected 的兼容性与校验要求。
用 querySelectorAll(':checked') 取值，别用 getElementsByName 直接遍历
很多人写 document.getElementsByName('item_id') 拿到所有复选框，再 for 循环判断 cb.checked —— 这能跑通，但容易漏掉状态更新延迟或 DOM 未就绪的问题。更直接可靠的是用伪类选择器一步到位：querySelectorAll('input[name="item_id"]:checked')，它只返回当前真正勾上的节点。
注意两点：
-
getElementsByName返回的是实时 HTMLCollection，循环中修改checked可能导致跳项（尤其配合for+i++） - 如果复选框是动态插入（比如 Vue/React 渲染后），
querySelectorAll必须在 DOM 真正挂载后再执行，否则返回空列表 - 别漏写
:checked—— 否则拿到的是全部复选框，还得二次过滤
form.elements 能简化取值，但要求复选框在 <form></form> 内
如果你的表格包在 <form></form> 标签里，且复选框都有 name（比如 name="selected"），可以直接用 form.elements.selected。它返回的是一个类似数组的对象，包含所有同名控件。
但要注意：
- 这个属性只对
<form></form>内部的元素有效，表格单独存在时不可用 - 返回值不是 Array，不能直接调用
.map()或.filter()，得先转成数组：Array.from(form.elements.selected).filter(cb => cb.checked) - 如果只有一个复选框被勾选，
form.elements.selected是单个元素；多个时才是类数组 —— 逻辑要兼容这两种情况
批量提交前必须校验 value，不能只信前端勾选状态
AJAX 提交时，常见错误是直接把 checkbox.value 当 ID 发给后端，结果遇到恶意构造的请求（比如手动改 value、重复提交、SQL 注入字符）。后端必须做两件事：
- 校验每个
value是否属于当前用户可操作的合法 ID 范围（比如查数据库是否存在、权限是否匹配） - 拒绝空字符串、非数字、超长字符串等非法格式，哪怕前端 JS 已做过限制
- 不要依赖 checkbox 的 DOM 顺序或索引 —— 表格有分页、搜索、排序时，
tr[0]对应的不一定是第一条数据
移动端点击失效？加 <label></label> 或设最小宽度
原生 input[type="checkbox"] 在手机上点击区域太小，尤其 iOS Safari 容易点不中。单纯加 width: 20px; height: 20px 不够，得让整个 <td> 可点击。
<p>推荐做法：</p>
<ul>
<li>把复选框包进 <code><label></label>，并用 for 绑定（需确保每行复选框有唯一 id）
<td> 加 <code>min-width: 44px（iOS 触摸最小建议尺寸），再用 CSS 把复选框居中
click 事件监听 —— 用户可能用键盘空格切换，必须用 change 才能覆盖所有触发方式const checkedBoxes = document.querySelectorAll('input[name="item_id"]:checked');
const ids = Array.from(checkedBoxes).map(cb => cb.value);
别忘了：表格带分页时，这个 ids 只含当前页数据 —— 全量操作必须和服务端约定分页参数，不能前端“假装全选”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
