单选框提交前必须确保同组name属性完全一致，否则无法实现互斥选择；每个radio需显式设置非空value；无checked项时该字段不提交；前端用required强制必选，后端须检查字段是否存在而非仅判空。
单选框提交前必须确保同组 name 完全一致
浏览器只靠 name 属性识别哪些单选框属于同一组，从而实现“只能选一个”的逻辑。如果两个本该互斥的选项 name 写成 gender 和 sex，它们就变成两组独立控件，用户能同时点中两个——但提交时只会把最后被点击的那个值发出去，后端收到的可能是意外项。
常见错误现象：页面上看起来是单选，但提交后后端收不到值，或收到空字符串。
- 检查所有同组
<input type="radio">的name属性是否拼写、大小写、空格都完全相同 - 避免用 JavaScript 动态生成时漏掉
name，或误写成nam、NAME等 - 服务端接收时，也按这个
name去取值（如 PHP 的$_POST['gender']）
value 决定提交给后端的具体内容，不是显示文字
用户看到的是 <label></label> 里的文字，比如“男”“女”，但真正发到服务器的是 value 属性的值。这让你可以分离展示和数据，比如把 value="M" 对应“男”，value="F" 对应“女”，后端处理更简洁。
容易踩的坑：没写 value，或者写成空字符串 value=""。这种情况下，即使用户点了该选项，提交的数据也是空，后端无法区分选择状态。
- 每个
<input type="radio">都应显式设置非空value - 不要依赖默认值；HTML 规范不定义无
value时的行为，不同浏览器可能返回on或空字符串 - 若需“未选择”语义，应额外加一个
value="none"项，并用 JS 或后端逻辑判断
没有默认选中的单选框，提交时该字段不会出现在请求中
如果一组单选框里没有任何一项带 checked 属性，用户又没手动点选，那整个 name 字段根本不会出现在 POST/GET 数据里。后端拿到的可能是 undefined、null 或直接报错（取决于语言和框架），而不是空字符串。
这不是 bug，是 HTML 表单的原始设计：未选中的控件不参与提交。
- 若业务要求必选，应在前端用
required属性强制校验：<input type="radio" name="level" value="basic" required> - 若允许“不选”，后端代码必须主动检查该
name是否存在于请求体中，不能只判空 - 用 JavaScript 检测时，
document.querySelector('input[name="level"]:checked')返回null表示未选中
用 JavaScript 获取当前选中的单选框值要小心 DOM 查询范围
直接调用 document.querySelector('input[name="theme"]:checked') 看似简单，但如果页面里有多个表单、或动态插入了同名单选框，可能查到错误的节点。
尤其在 SPA 或组件化场景下，不同模块可能无意中复用相同 name，导致取值错乱。
- 优先限定查询范围，例如：
formEl.querySelector('input[name="theme"]:checked') - 避免全局
querySelector，除非确认页面唯一 - 获取值时别忘了判空：
el && el.value，否则el.value会报Cannot read property 'value' of null - 监听变化用
change事件而非click，因为键盘操作（空格键切换）也会触发change，更健壮
form 包裹正确、name 和 value 设置到位、至少一项有 checked 或用户手动选中，原生提交就能工作。复杂交互和验证是锦上添花，但基础结构一旦出错，再漂亮的 JS 也补不回丢失的字段。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
