radio序列化只提交选中项的name和value，未选中项不参与——这是规范行为；常见原因包括未选中、name不一致、DOM未就绪或checked属性未正确设置。
表单序列化时，radio 只提交被选中项的 name 和 value，未选中项完全不参与序列化 —— 这不是 bug，是规范行为。如果你发现序列化结果里缺了单选框值，大概率是没选中、name 不一致，或 DOM 尚未就绪。
form.serialize() 为什么拿不到 radio 值
jQuery 的 serialize() 依赖 :checked 伪类筛选，但只对 input[type="radio"] 和 input[type="checkbox"] 生效，且要求：① 必须在 <form></form> 内；② name 属性存在且非空；③ 至少有一个选项带 checked 属性（哪怕 JS 动态设置过，也要确保 DOM 中有该属性）。
常见漏掉的原因：
-
name拼写不一致（比如大小写混用、多空格、前后缀不同） - 页面加载时没有默认
checked，用户又没手动点选，导致整个组无选中项 - 用 JS 设置
checked = true但没同步写入 DOM 属性：el.checked = true不等于el.setAttribute('checked', 'checked') - radio 元素被动态插入，但没 append 到
form内部，serialize()直接忽略
原生 FormData.append() 处理 radio 的正确姿势
FormData 对 radio 更宽容，它按表单控件的“有效提交状态”收集，不依赖 checked 属性是否存在，而是看当前 DOM 状态。但仍有陷阱：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须用
new FormData(formElement)构造，不能手动append单个 radio —— 手动 append 会丢失“组内互斥”逻辑，可能把多个同名 radio 都塞进去 - 如果 radio 组没有初始
checked，且用户始终没点击，FormData里就真的没有这个name键 - 不要用
querySelector('input[name="xxx"]:checked')去取值再手动 append，这绕过了浏览器原生逻辑，容易和后端预期不一致
推荐写法：
const form = document.querySelector('#myForm');
const formData = new FormData(form);
// 后端收到的就是 { payment: 'wechat' } 这样的键值对，没选中则无 payment 字段
手动遍历 radio 组取值的兼容性写法
当需要预校验、或表单结构不标准（比如 radio 不在 form 内），就得自己遍历。关键点是：按 name 分组，找第一个 checked 的元素。
- 别用
document.querySelectorAll('input[type="radio"]')全局查 —— 效率低，且无法区分不同组 - 用
document.querySelectorAll('input[name="payment"]:checked')直接定位已选中的，返回 NodeList，取[0]?.value最安全 - 如果要兼容老 IE（
:checked不支持），得 fallback 到循环 +el.checked === true判断 - 注意：
el.checked是布尔值，而el.getAttribute('checked')返回字符串或 null，二者语义不同
简短示例：
function getRadioValue(name) {
const checked = document.querySelector(`input[name="${name}"]:checked`);
return checked ? checked.value : null;
}
// 调用 getRadioValue('payment') → 'alipay' 或 null
真正容易被忽略的是：序列化行为取决于“当前 DOM 状态”，而不是 HTML 源码里的 checked 属性。JS 动态操作后没触发浏览器重排或没等事件循环完成，就立刻序列化，很可能拿到旧值。务必确认操作与序列化之间没有竞态。
