radio单选本质靠name属性相同分组，label需包裹或for绑定确保可访问性，checked属性实现默认选中，提交时未选中则字段不出现，需服务端校验或隐藏字段兜底。
radio单选框的name属性必须一致
HTML里radio能“单选”的本质，是靠name属性值相同来实现分组。如果两个input type="radio"的name不同，它们就互不影响，变成两个独立开关——这常是初学者选不了、取不到值的根源。
正确写法是给男女选项都设相同的name，比如name="gender"，再配上不同的value便于后端或JS识别：
<input type="radio" name="gender" value="male"> 男<br><input type="radio" name="gender" value="female"> 女
label标签要和radio正确关联
直接写文字（如上面示例）虽然能用，但点击“男”“女”文字本身无法触发选择——体验差，也不符合可访问性要求。必须用label包裹或通过for绑定。
推荐用包裹方式，简洁可靠：
<label><input type="radio" name="gender" value="male"> 男</label><br><label><input type="radio" name="gender" value="female"> 女</label>
- 不用写
id和for，减少出错可能 - 点击文字或圆圈都能选中，语义清晰
- 屏幕阅读器能正确读出关联关系
默认选中用checked属性，别用value匹配
想让“男”默认被选中，加checked属性就行，不是靠value="male"自动生效。这个属性是布尔型，写上即生效，无需赋值。
错误写法：value="male" checked="true"（checked不接受字符串值）
正确写法：
<label><input type="radio" name="gender" value="male" checked> 男</label><br><label><input type="radio" name="gender" value="female"> 女</label>
-
checked是独立属性，有它就选中，没它就不选中 - 同一组里只能有一个
checked，多了也只认第一个 - 不要试图用JS在加载后去“设置value为male就选中”，那是无效的
表单提交时注意空值风险
radio组如果没有一个被选中，提交时该name根本不会出现在表单数据里（不是gender=，而是压根没这条）。后端收到空值容易报错或逻辑跳过。
稳妥做法有两个：
- 服务端代码必须判断
gender字段是否存在，而不是直接取值 - 前端加一个隐藏的默认项（非必需，但能兜底）：
，确保字段一定提交
另外，如果页面用JS动态操作，记得用document.querySelector('input[name="gender"]:checked')取值，而不是遍历所有radio——未选中的没有checked属性，查不到就说明没选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
