原生 checkbox 多选提交关键在于同名 name 属性（如 name="hobby[]"）和有效 value 值，未勾选项不提交；后端需按 name 解析为数组，注意框架对 [] 的兼容性要求。
用 <input type="checkbox"> 实现多选提交
浏览器原生支持多选提交，关键不是“怎么打包”，而是“怎么让后端收到一个数组或列表”。<input type="checkbox"> 的 value 值会随勾选状态自动参与表单提交，未勾选的项根本不会发给服务端——这点常被忽略，导致后端只收到部分数据或空数组。
实操建议：
- 所有同组 checkbox 必须使用相同的
name，例如name="hobby"；不同 name 对应不同字段，不能靠 class 或 id 分组 - 每个 checkbox 的
value应为有意义的字符串（如value="reading"），避免用value="on"或空值 - 如果某选项默认要选中，加
checked属性，不要依赖 JS 初始化 - 服务端接收时，需按 name 名解析为数组（PHP 用
$_POST['hobby']是数组；Node.js 的body-parser默认也支持）
后端收不到数组？检查 name 是否带方括号
有些框架（如 Laravel、Express + body-parser）对数组格式敏感：若前端写 name="hobby"，后端可能只拿到最后一个值；而写成 name="hobby[]" 才能稳定识别为数组。这不是 HTML 标准要求，但属于事实上的协作约定。
常见错误现象：
- PHP 中
$_POST['hobby']是字符串而非数组 → 改为name="hobby[]" - Express +
body-parser解析出req.body.hobby为字符串 → 同样需加[] - Spring Boot 的
@RequestParam List<string> hobby</string>能直接接收name="hobby"，不加[]也可，但统一用hobby[]更兼容
用 <select multiple></select> 替代 checkbox？注意用户操作习惯
<select multiple></select> 确实能多选提交，但它在桌面端需按住 Ctrl/Cmd 才能多选，移动端体验更差（长按+拖拽或弹出全屏选择器）。普通用户容易误以为只能单选，导致漏选。
适用场景有限：
- 选项数量较多（>8）、且有自然排序（如省份下拉）时，
<select multiple></select>比一堆 checkbox 更省空间 - 必须搭配
size属性（如size="5"）才能显示多行，否则退化为单行下拉，失去多选能力 - 提交时 value 行为与 checkbox 一致：选中的项以相同 name 发送，未选中不发送
JavaScript 手动收集 checkbox 数据？通常没必要
除非你要做自定义校验、动态禁用、或绕过表单提交（比如用 fetch 发 JSON），否则不用 JS 拼数组。原生表单提交已足够可靠。
但如果真要手动生成：
- 别用
document.querySelectorAll('input[type="checkbox"]')全局查——得限定在当前<form></form>内，且过滤掉disabled和未勾选的 - 推荐写法：
Array.from(form.querySelectorAll('input[name="hobby"]:checked')).map(el => el.value) - 注意：若存在同名但不同类型的 input（如 hidden + checkbox），
:checked可保安全；但没加name的 checkbox 不会出现在提交数据里，JS 里也别去读它
name 是否带 [] 的约定不一致，以及 checkbox 没设 value 导致后端收到一堆 "on"。这两点比任何 JS 方案都更容易引发线上问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
