多选控件提交时浏览器原生发送同名独立字段，后端默认接收为数组（如php的$_post['hobbies']），非逗号字符串；需字符串时须前端手动join()拼接并写入隐藏字段。
多选控件的值不会自动“拼成字符串”传给后端——浏览器原生提交时，select[multiple] 和同名 input[type="checkbox"] 都会把每个选中项作为独立字段发送，后端收到的是数组（如 PHP 的 $_POST['tags'] 是数组），不是逗号分隔的字符串。想传字符串，必须前端手动拼接。
select[multiple] 提交时后端收到什么
浏览器对 select[name="hobbies"][multiple] 的默认提交行为是：每个选中 <option></option> 的 value 作为同名参数重复出现。例如选中 "reading" 和 "music"，实际发出的表单数据是：
hobbies=reading&hobbies=music
PHP 接收为 $_POST['hobbies'] = ['reading', 'music']；Node.js 的 body-parser 也默认转成数组；Django 的 request.POST.getlist('hobbies') 同理。不需要额外处理就能拿到数组。
- 别用
select.value—— 它只返回第一个选中项，多选时失效 - 如果后端框架不自动合并同名字段（极少见），检查是否启用了标准表单解析中间件
-
size属性只影响显示行数，不影响提交逻辑
checkbox 组怎么确保后端收到数组
多个 input[type="checkbox"] 必须共用相同的 name（如 name="feature"），且每个都有 value。未勾选的 checkbox 不会出现在提交数据中——这是正确行为，不是 bug。
- 不要给 checkbox 加
id并指望靠它传值；id不参与表单序列化 - 如果所有 checkbox 都没选，后端收不到该
name字段（PHP 中isset($_POST['feature'])为 false） - 需要“空数组”语义时，在后端显式初始化：
$features = $_POST['feature'] ?? []
为什么需要前端手动 join() 拼接字符串
当后端接口明确要求单个字符串参数（如 tags=a,b,c 或 filters=active|paid|verified），而你又不能改接口时，就得在提交前干预。
- 用
querySelectorAll('input[name="tag"]:checked')或select.selectedOptions提取 DOM 选中项 - 转成值数组后调
.map(el => el.value).join('|')，别用.toString()（无法控制分隔符） - 如果要发到 URL 查询参数里，必须
encodeURIComponent(values.join(',')) - 避免用空格或逗号作分隔符，若选项值本身含这些字符（比如
value="C++, Python"）
隐藏字段 + JavaScript 同步是最稳的兜底方案
如果你用 AJAX 提交、或表单里混了非表单元素（比如从表格里读出的 ID 列表），就别依赖原生提交机制。直接用 <input type="hidden" name="selected_ids">，并在用户操作 checkbox / select 时实时更新它的 value：
const hidden = document.querySelector('input[name="selected_ids"]');<br>const checkboxes = document.querySelectorAll('input[name="item_id"]:checked');<br>hidden.value = Array.from(checkboxes).map(cb => cb.value).join(',');
这个 hidden 字段会在任何方式的表单提交中被带上，且值始终是你控制的字符串格式。比临时拼接更可靠，尤其在多次勾选/取消的交互中不易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
