应使用 document.queryselectorall('input[name="item_id"]:checked') 直接获取已勾选复选框，因其返回静态 nodelist、支持 foreach 且精准限定范围；避免用 getelementsbyname 等动态集合，防止遍历时跳项或报错。
直接用 document.querySelectorAll('input[name="xxx"]:checked') 拿值，别遍历所有 checkbox 再判断 checked —— 简单、可靠、不漏项。
为什么不能用 getElementsByName 或 getElementsByClassName 遍历后判断？
这两者返回的是实时 HTMLCollection，不是静态数组。你在循环中修改 checked 属性时，集合会动态变化，导致跳过某些项或重复处理。更糟的是，它们不支持 forEach，得转成数组再操作，多一层转换还容易出错。
而 querySelectorAll 返回的是静态 NodeList，遍历时 DOM 变化不影响它，且原生支持 forEach。
- 错误写法：
document.getElementsByName('item_id').forEach(...)（报错，因为没有 forEach） - 错误写法：
Array.from(document.getElementsByClassName('item-check')).forEach(...)（可行但绕路，且 class 不如 name 语义清晰） - 正确写法：
document.querySelectorAll('input[name="item_id"]:checked')（一步到位，只拿到已勾选的）
:checked 伪类必须和 name 一起用才安全
只写 input:checked 会把页面里所有复选框（包括全选框、其他表单里的）都抓进来，造成 ID 混乱。加上 [name="item_id"] 才能精准限定范围。
- 全选框自己不要和数据项共用 name，比如数据项用
name="item_id"，全选框就别设 name，或设成name="select-all" - 如果用了
data-group="users"分组，也可以写document.querySelectorAll('input[data-group="users"]:checked')，但 name 更轻量、更符合表单语义 - value 必须有且唯一，否则后端收到一堆
on或重复 ID，没法区分哪条数据被选了
批量取 value 的最小可靠代码怎么写？
别拼字符串、别 push 到空数组再 join，用 Array.from() + map() 一行搞定：
const selectedIds = Array.from(
document.querySelectorAll('input[name="item_id"]:checked')
).map(cb => cb.value);
这行代码能直接得到字符串数组，比如 ["1024", "1025", "1027"]。如果 value 是数字类型，后端也认得——浏览器提交时自动转成字符串，JS 里保持 string 类型反而更稳。
- 别用
cb.getAttribute('value')，它读的是 HTML 属性，可能和当前实际 value 不一致（比如 JS 改了cb.value但没改属性） - 别依赖
dataset.id，除非你明确写了data-id="1024"；多数场景 value 就够用，且 form 提交时也靠 value - 如果表格有分页或搜索过滤，这个查询只会拿到当前 DOM 中的已勾选项，正好符合预期——你本就不该跨页批量操作而不提示
移动端或禁用项混在其中时要注意什么？
:checked 本身不区分 disabled 状态，只要勾上了就会被选中。但用户可能点了禁用项旁边的 label 却没反应，误以为“没点上”。这时候问题不在取值逻辑，而在结构。
- 确保每个复选框都包裹在
<label></label>里，或至少for属性绑定正确，扩大点击区域 - 禁用项（
disabled）不会触发 change，也不会被:checked匹配到——前提是它真没被勾上；但如果服务端下发时默认设了checked disabled，那它会被计入，得前端额外过滤 - 需要排除禁用项时，加个
:not(:disabled)：document.querySelectorAll('input[name="item_id"]:checked:not(:disabled)')
真正容易被忽略的是：value 值是否经过后端校验。前端拿到的 cb.value 是纯字符串，可能被篡改。批量删除前，后端必须校验每个 ID 是否属于当前用户可操作范围，不能只信前端传来的列表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
