checkbox的value属性仅标识单个选项值，多选集合依赖同name下多个checkbox的value共同提交；未勾选项不参与提交，后端需通过name统一收集所有勾选项的value值。
checkbox 的 value 属性只负责单个值，不是多选集合
很多人误以为给多个 <input type="checkbox"> 设置相同 name、不同 value，就能靠一个 value 属性传“多值”——其实不是。value 本身是每个 checkbox 独立的字符串值，浏览器只在该 checkbox 被勾选时，才把它的 value 作为键值对的一部分提交。没勾选的，根本不会出现在请求数据里。
真正实现“多值传输”的关键，是让多个 checkbox 共享同一个 name，后端按该 name 收集所有被勾选项的 value。比如：
<input type="checkbox" name="role" value="admin"><input type="checkbox" name="role" value="editor"><input type="checkbox" name="role" value="viewer">
用户勾选 admin 和 viewer 时，实际提交的是：role=admin&role=viewer（表单编码）或 JSON 中的 role: ["admin", "viewer"]（取决于后端解析逻辑）。
后端怎么接收 checkbox 多值？看语言和框架
不同后端对重复 name 参数的处理方式不同，不是所有环境都自动转成数组：
- PHP：
$_POST['role']默认是数组（前提是 HTML 中name后加[]，即name="role[]"；否则只取最后一个值） - Node.js（Express）：需启用
extended: true的urlencoded中间件，且默认仍需name="role"（不加[]），它会自动合并同名字段为数组 - Java（Spring Boot）：用
@RequestParam List<string> role</string>或String[] role接收，name="role"即可，无需方括号 - Python（Flask）：
request.form.getlist('role')是标准做法，name="role"就够了
重点：HTML 侧永远用 name="xxx"（不要加 []），除非你用的后端明确要求（如老版 PHP）。加了 [] 可能导致其他框架解析失败。
容易踩的坑：name 不一致、没勾选、value 是空字符串
这三个问题最常导致后端收不到值或收到意外值：
-
name写错或大小写不一致（比如Role和role），后端完全收不到任何值 - 用户一个都没勾，整个
name字段不会出现在请求中——后端要判空，不能直接解构或遍历 -
value=""或value=" "（带空格）会被提交，但可能被后端 trim 或忽略，建议显式设为有意义的字符串，如value="email_notify" - 别用
checked属性控制初始状态来“模拟默认多选”，它只影响渲染，不影响提交逻辑；是否提交只取决于用户最终是否勾选
需要动态增删 checkbox 时，value 不能重复也不能含特殊字符
如果 checkbox 列表来自 JS 动态生成（比如从 API 拉取权限列表），要注意：
-
value最好是后端可识别的唯一标识（如数据库 ID 或规范 key），避免用中文、空格、斜杠等，否则 URL 编码后易出错 - 重复
value不会报错，但会导致后端无法区分哪一项被勾选——比如两个value="1"，勾选任意一个都传1，且无法知道是哪一个 - 提交前可用 JS 校验：
document.querySelectorAll('input[name="role"]:checked').forEach(cb => console.log(cb.value))，确认收集的值符合预期
真正麻烦的不是 value 怎么写，而是前后端对“同名多值”的约定是否统一——协议没对齐，前端传得再对，后端也收不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
