最省事方式是直接 new FormData(formElement)，它自动收集所有带name、非disabled控件值；注意必须传DOM元素而非选择器字符串，同名多选字段需用getAll()获取数组，select[multiple]应读selectedOptions，checkbox须用:checked伪类查询并转数组处理。
用 FormData 一次性拿全多选值最省事
直接 new FormData(formElement)，它自动收集所有带 name、非 disabled 的控件值，包括 checkbox、select[multiple] 和 input[type="file"]。不用区分类型，也不用手动判断 checked 或 selectedOptions。
常见翻车点：
- 传字符串选择器（如
"#myForm"）给FormData构造函数，会报错——必须传 DOM 元素节点 - 漏写
name属性的控件，FormData直接忽略，不是 bug，是 HTML 规范行为 - 同名多选字段（如多个
name="tags"的 checkbox），formData.get("tags")只返回最后一个值；得用formData.getAll("tags")拿数组
select[multiple] 别读 .value，它只返回第一个
<select name="roles" multiple> 的 .value 属性不可靠：未选中时返回空字符串，选中多个时只返回第一个 option 的 value，完全不能反映真实状态。
正确做法是读 .selectedOptions：
立即学习“前端免费学习笔记（深入）”；
-
select.selectedOptions是实时的HTMLCollection，包含所有当前被选中的<option>元素 - 转成数组再取值：
[...select.selectedOptions].map(opt => opt.value) - 如果要同时获取显示文本，用
opt.text；判断是否没选中，检查select.selectedOptions.length === 0
input[type="checkbox"] 用 querySelectorAll 查 :checked 最稳
别用 document.getElementsByName("xxx") 然后遍历判断 .checked，容易混入 radio 或漏掉动态插入的节点。
推荐写法：document.querySelectorAll('input[type="checkbox"]:checked')
- 必须带上
type="checkbox"，否则input[name="agree"]:checked会把同名 radio 也拉进来 未设 - NodeList 不是数组，不能直接
.map()，得先转：Array.from(checkboxes).map(cb => cb.value) - 动态渲染的 checkbox，必须等 DOM 插入完成再执行查询，否则返回空 NodeList
value 的 checkbox 会返回默认值 "on"，不是空字符串，后端可能解析失败
表单提交时，没勾选的 checkbox 后端根本收不到
HTML 规范规定：未勾选的 checkbox 在序列化表单时不参与提交。后端看到的是“有这个 key”或“根本没有这个 key”，不会收到 false、null 或 off。
这意味着：
- 不能靠“没收到某个 key”就断定用户没选——可能是前端压根没发，也可能是用户禁用了 JS 导致 DOM 未加载
- 如果业务需要明确区分“未选”和“未提交”，得额外加一个隐藏字段（如
<input type="hidden" name="agree_present" value="1">）来标记该组 checkbox 是否参与了本次提交 - 服务端解析时，对同名多值字段（如 PHP 的
$_POST["hobbies"]）必须按数组处理，不能当字符串用
