单选按钮提交的是整个表单，仅选中的radio的value值出现在Form Data或Query String中；需用:checked伪类获取选中项，name和value必须一致且显式设置，未选中时返回null需主动判断。
用浏览器开发者工具实时查看提交的表单数据
单选按钮（<input type="radio">）本身不提交，提交的是整个表单；真正能观察到参数的关键是「表单提交瞬间」的数据快照。打开浏览器开发者工具（F12），切换到 Network 标签页，然后提交表单——找到对应请求（通常是 POST 或 GET），点开它，在 Headers 或 Form Data（如果是 POST）/ Query String Parameters（如果是 GET）里就能看到实际发送的键值对。
注意：只有被选中的那个 radio 会出现在提交数据中，未选中的不会传输，也不会传空值或 undefined。
为什么 document.querySelector('input[name="xxx"]') 取不到值？
因为 querySelector 默认只返回第一个匹配元素，而单选按钮组有多个同名 input。必须用 querySelector 配合 :checked 伪类，或者遍历所有同名 radio 并检查 checked 属性：
-
document.querySelector('input[name="gender"]:checked')—— 返回当前选中的那个元素，再取.value -
Array.from(document.querySelectorAll('input[name="gender"]')).find(el => el.checked)?.value—— 更安全，避免null报错 - 如果没选中任何一项，上述两种方式都返回
null或undefined，需主动判断
后端收不到 radio 参数？检查 name 和 value 是否一致
HTML 中单选按钮组必须共享相同的 name 属性，否则浏览器会把它们当成独立控件；同时每个 input 的 value 必须明确设置（不能留空或只靠显示文字），因为提交的就是这个 value 字符串：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<input type="radio" name="level" value="beginner"> 入门<br><input type="radio" name="level" value="advanced"> 进阶
常见错误：
-
name拼写不一致（如level和lvl）→ 分成两组，后端收到零个或多个同名参数 -
value缺失或全为空字符串 → 提交的是空值，后端可能解析失败或误判为未选择 - 漏掉
value但写了id或label→ 浏览器不认这些，照样不提交
用 JavaScript 模拟提交前验证 radio 是否已选
用户可能直接点提交却没选任何选项，此时表单仍会发出（空提交），后端得额外处理。前端可提前拦截：
function getRadioValue(name) {<br> const checked = document.querySelector(`input[name="${name}"]:checked`);<br> return checked ? checked.value : null;<br>}<br><br>form.addEventListener('submit', e => {<br> if (getRadioValue('payment') === null) {<br> alert('请选择支付方式');<br> e.preventDefault();<br> }<br>});
关键点：
- 别用
required属性依赖浏览器默认校验——它只在提交时触发，且部分老浏览器支持不佳 - 用
getRadioValue()封装逻辑，避免重复写:checked查询 - 返回
null比undefined更明确，便于后续条件判断
真正容易被忽略的是：radio 组没有“默认选中”时，document.querySelector 查不到任何 :checked 元素，这时候连 .value 都访问不到——不是报错，而是静默失败。务必加空值防护，尤其在封装函数或做表单序列化时。
