后端接收多选值需前端name带[]后缀且启用multiple属性；select multiple在移动端体验差，推荐用checkbox组替代。
后端能收到多选值，前提是前端用对了 name 格式和 multiple 属性；否则只会拿到最后一个选中项，或根本收不到数组。
select multiple 的 name 必须带 [] 后缀
浏览器对 select 元素启用 multiple 后，会把所有选中项拼成一个列表提交，但只有后端语言（如 PHP、Node.js）按数组方式解析时才真正生效。关键在 name 值是否含方括号：
-
name="hobbies"→ 后端只收到最后一个选中值（PHP 会覆盖，其他语言可能报错或丢数据） -
name="hobbies[]"→ 后端收到数组：["coding", "music", "sports"] - HTML 中不写
[]，后端无法自动识别为多值，这是最常踩的坑
复选框（checkbox）比 select multiple 更常用
虽然 select multiple 语义清晰，但实际项目中更倾向用 input type="checkbox"，原因很实在：
- 用户习惯：Ctrl/Cmd + 点击太隐蔽，很多人不知道怎么多选
select - 样式可控：原生
select multiple高度固定、滚动条难定制，CSS 限制多 - 无障碍支持更好：屏幕阅读器对 checkbox 组的处理更成熟
- name 写法一致：
name="hobby"就够了，不用加[]（浏览器默认按同名多值提交）
后端接收时注意空值和类型转换
即使前端传了数组，后端接收到的可能是空数组、字符串或 null，尤其当用户没做任何选择时：
- PHP：
$_POST['hobbies'] ?? []安全取值，避免Undefined index - Node.js（Express）：
req.body.hobbies || []，且需确认body-parser已启用extended: true - 空提交风险：
select multiple没选项被选中时，该字段根本不会出现在 POST 数据里；而 checkbox 全未勾选时，该字段压根不提交 —— 两者行为不一致
JavaScript 动态读取选中值要区分 DOM 类型
用 JS 获取用户选了哪些，不能统一用 .value：
-
select[multiple]：必须遍历selectedOptions或检查每个option.selected -
input[type=checkbox]：用querySelectorAll('input[name="hobby"]:checked')拿 NodeList，再映射出value - 错误写法：
document.getElementById('mySelect').value→ 只返回第一个选中项
真正容易被忽略的是：select multiple 在移动端几乎不可用 —— iOS Safari 会强制弹出全屏选择器，且不支持连续拖选；如果表单要兼顾手机用户，优先用 checkbox 组或封装过的下拉多选组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
