单选按钮的 value 必须写在每个 <input type="radio"> 标签内，name 属性决定分组，未显式设置 value 时默认提交 "on"；空字符串 value="" 与缺失 value 行为不同，建议显式设置有意义的值并用 querySelector('input[name="xxx"]:checked') 获取选中项。

单选按钮组的 value 必须写在每个 <input type="radio"> 上

单选按钮组（radio）没有“组级 value”的概念，value 是每个选项独立的属性。浏览器只提交被选中的那个 <input> 的 value 值，其余忽略。

常见错误是试图在 <fieldset> 或父容器上设 value，这完全无效——HTML 解析器直接忽略。

• name 属性才决定“是否属于同一组”：同名的 radio 才能互斥选择
• value 只出现在 <input> 标签内，且必须是字符串（空字符串也合法）
• 不写 value 时，提交值默认为 "on"（不是空或 undefined）

为什么 value 为空字符串或特殊字符时要小心

后端接收时，空字符串 value="" 和缺失 value 属性的行为不同：前者提交空字符串，后者提交 "on"。这容易导致逻辑误判，比如用 if (val) 判断非空时，"" 会失败，但 "on" 不会。

建议统一显式设置有意义的 value，避免依赖默认值：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

<input type="radio" name="level" value="low">
<input type="radio" name="level" value="medium">
<input type="radio" name="level" value="high">

• 不要写 value="" 表示“无选择”——单选按钮组天然要求必选其一；如需“不选”，应加一个 value="none" 的选项并设 checked
• 避免用空格、中文或特殊符号作 value（如 value="高优先级"），URL 编码后易出错，也不利于后端匹配

JavaScript 获取选中项的 value 要用 querySelector 而非 getElementById

因为单选按钮是多个元素共享一个 name，没有单个 ID 能代表“当前选中值”。直接查 document.querySelector('input[name="gender"]:checked') 最可靠。

• 如果没选项被选中，querySelector 返回 null，需判空再取 .value
• 别用 document.getElementsByName("gender")[0].value ——它总是返回第一个元素的 value，和是否选中无关
• 表单提交前校验可用 form.checkValidity()，但不会自动阻止未选情况；需手动检查 :checked 是否存在

后端接收不到 value？先确认三点

提交后端收不到字段，90% 是前端配置问题，不是后端 bug。

• 所有 radio 的 name 拼写是否完全一致（区分大小写）
• 是否漏写了 value，导致浏览器发的是 "on"，而你后端在等 "yes"
• 表单 method 是 GET 还是 POST？GET 提交时，URL 中该参数是否存在（可看浏览器地址栏或 Network Tab）

复杂点在于：单选按钮本身不触发事件监听，change 事件必须绑定到每个 input 或委托到父容器；而很多人忘了给动态插入的 radio 补监听。