应使用 document.queryselectorall('input[name="item"]:checked') 直接获取所有已勾选复选框的 value，该选择器天然过滤未选、disabled 及非 checkbox 元素，避免遍历后判断导致的漏项或错取问题。
怎么用 querySelectorAll 一次性拿到所有选中复选框的 value
直接用 document.querySelectorAll('input[name="item"]:checked')，别遍历全部再判断 checked。这个选择器天然只返回已勾选、且 name 匹配的 input 元素，过滤掉未选、disabled、甚至非 checkbox 的干扰项。
常见错误是写成 document.querySelectorAll('input[name="item"]') 再 forEach 判断 cb.checked——表格重排、分页、虚拟滚动后 DOM 顺序和业务顺序脱钩，容易漏项或错取。
- 确保所有目标复选框统一用
name="item"（不是 class 或 id），否则选择器失效 - 每个复选框必须有明确的
value，比如<input type="checkbox" name="item" value="1024">；没设 value 时默认为"on"，后端无法区分具体哪条数据 - 如果用了框架（Vue/React），
value必须绑定真实 ID，避免重渲染后全变成"on"
为什么不能用 getElementsByName 获取选中值
getElementsByName 返回的是 HTMLCollection，它是“实时集合”，在循环中修改 checked 状态可能导致跳项或遍历不全；更关键的是它不支持伪类 :checked，没法一步筛出已选。
而 querySelectorAll 返回静态 NodeList，可直接 forEach，且支持完整 CSS 选择器语法。
- 错误写法：
document.getElementsByName("item")[i].checked—— 需要手动计数、易越界 - 正确写法：
Array.from(document.querySelectorAll('input[name="item"]:checked')).map(cb => cb.value) - 如果需要兼容老浏览器（IE8-），得降级为遍历 +
checked判断，但现代项目基本不用考虑
FormData.getAll 能不能直接取多选 checkbox 的值
能，但必须满足两个前提：表单存在、且复选框 name 以 [] 结尾（如 name="item[]"）。
调用 formData.getAll("item[]") 会返回字符串数组；如果 name 是 "item"（无括号），getAll 只返回第一个值，其余被丢弃——这是 HTML 表单规范决定的，和 JS 无关。
- 后端 PHP 接收时，
$_POST['item']是数组仅当 name 为item[]；否则只拿到最后一个 - 前端用
new FormData(formEl)构造时，formEl 必须是包裹这些复选框的<form></form>元素，不能是 document 或 div - 注意：disabled 复选框不会被
FormData收集，这点和:checked选择器行为一致
反选后如何安全提取当前选中项
反选操作本身不触发 change 事件，所以你手动执行 box.checked = !box.checked 后，必须显式重新运行“同步全选状态”逻辑，否则 :checked 选择器取到的仍是旧结果。
尤其要注意：反选前要排除表头复选框和 disabled 项，否则 box.checked 读写会报 Cannot set property 'checked' of null。
- 反选代码里必须加守卫：
if (box && !box.disabled) box.checked = !box.checked - 反选完立刻执行一次统计逻辑：
const checkedItems = document.querySelectorAll('input[name="item"]:checked') - 不要依赖“翻转前数量”推算结果，DOM 状态才是唯一真相
value 被清空或重复，会导致后端收到一堆 "on" 或空字符串。务必确认每个复选框的 value 在每次渲染后都绑定到真实业务 ID。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
