应使用 document.querySelectorAll('input[type="checkbox"]:checked') 获取所有选中的复选框值，该方法简洁精准；未设 value 时默认为 "on"；FormData 需用 getAll() 而非 get() 才能获取全部选中项。
怎么用 JavaScript 获取所有选中的 checkbox 值
直接遍历所有 type="checkbox" 元素，检查 checked 状态，收集 value 属性即可。别用 document.querySelector('input[type="checkbox"]') —— 它只返回第一个，必须用 querySelectorAll 或 getElementsByName。
常见错误：把 name 写成相同值但没加 []（比如 name="tag" 而不是 name="tag[]"），其实对获取值没影响；name 相同只是为了语义分组，真正靠的是 DOM 遍历逻辑。
- 推荐用
document.querySelectorAll('input[type="checkbox"]:checked')，简洁且语义清晰 - 如果 checkbox 有统一
name（如name="role"），可用document.querySelectorAll('input[name="role"]:checked')，更精准 - 注意：未设置
value的 checkbox，默认值是"on"，不是空字符串或undefined
用 FormData 获取 checkbox 值时要注意什么
FormData 只会把 checked 的 checkbox 加入数据，但它的行为和表单提交一致：多个同名 checkbox，只会取第一个的值（除非后端框架支持数组解析，比如 PHP 自动转成 $_POST['tag'] 数组）。
所以前端用 FormData + fetch 时，别指望它自动打包成数组传过去——它只是按原生表单规则序列化，后端需主动处理重复键。
- 用
new FormData(formEl)后，调用getAll('role')才能拿到全部选中项（get('role')只返回第一个） - 确保每个 checkbox 都有
name属性，否则FormData忽略它 - 如果没包在
里，FormData构造函数无法自动收集，得手动append
Vue/React 中怎么响应 checkbox 多选变化
不要监听每个 checkbox 的 change 事件再手动维护数组——太容易漏状态或触发多次更新。应该绑定一个数组变量，让框架自动同步。
Vue 中用 v-model 绑定到数组，checkbox 的 value 就是选中时推入的值；React 中用受控组件，onChange 里用 filter + includes 切换当前值。
- Vue 示例：
，selectedRoles是数组，勾选就 push，取消就 splice - React 示例：在
onChange里写setChecked(prev => prev.includes(val) ? prev.filter(x => x !== val) : [...prev, val]) - 别用
checked={val === target}+ 单个onChange模拟多选——这会让状态管理失控
后端接收时为什么只收到一个 checkbox 值
不是前端没传全，而是后端解析方式错了。HTTP 请求体里，同名参数出现多次（如 role=admin&role=editor），标准解析默认只取第一个。Node.js 的 querystring、Python 的 request.form.get() 都这样。
必须显式调用“获取全部同名参数”的 API，比如 Express 的 req.body.role 如果是数组中间件（如 express.urlencoded({ extended: true })）才有效；否则要用 req.body['role[]'] 或原始解析。
- PHP：直接
$_POST['role']就是数组（前提是 HTML name 写成name="role[]"） - Express：启用
extended: true并确认 body-parser 配置正确，否则req.body.role是字符串 - FastAPI：用
list[str]类型注解接收，或request.query_params.getlist('role')
最常被忽略的一点：前后端对“同名多值”的约定不统一，调试时先抓包看请求体里到底有没有多个字段，再查后端解析逻辑——别一上来就改前端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
