单选按钮通过name属性实现分组，相同name的选项互斥，用户只能选择一项；使用checked属性设置默认选中项，并推荐结合label标签提升可访问性与用户体验。
HTML中的单选按钮（radio button）用于让用户在一组互斥选项中选择一项。用户只能从同一组中选择一个选项，这就是所谓的“单选”。
radio单选按钮的基本语法
使用 <input type="radio"> 创建单选按钮。每个按钮通常配合一个 <label> 标签，提升可访问性和用户体验。
<input type="radio" name="gender" value="male"><label>男</label><br> <input type="radio" name="gender" value="female"><label>女</label>
name 属性 是关键：只有 name 相同的 radio 按钮才会被归为一组，从而实现单选效果。不同 name 的按钮互不影响。
通过 name 属性实现分组
如果多个 radio 按钮的 name 值相同，浏览器会自动将它们视为一组，用户只能选中其中一个。
立即学习“前端免费学习笔记（深入）”；
例如以下两组性别和年龄段选择：
<!-- 性别组 --><br> <input type="radio" name="gender" value="male"><label>男</label><br> <input type="radio" name="gender" value="female"><label>女</label><br><br><p><!-- 年龄组 --><br> <input type="radio" name="age" value="under18"><label>18岁以下</label><br> <input type="radio" name="age" value="18-60"><label>18-60岁</label><br> <input type="radio" name="age" value="over60"><label>60岁以上</label></p>
这两组分别独立操作，互不干扰。
设置默认选中项
使用 checked 属性可以让某个单选按钮在页面加载时默认被选中。
只需要在希望默认选中的 <input> 标签中添加 checked 或 checked="checked" 即可。
<input type="radio" name="color" value="red"><label>红色</label><br> <input type="radio" name="color" value="blue" checked><label>蓝色</label><br> <input type="radio" name="color" value="green"><label>绿色</label>
此时，“蓝色”选项会默认被选中。注意：同一组中只应有一个按钮设置 checked，否则最后一个会生效。
提升可读性与可用性的建议
- 始终为 radio 搭配 <label>，并使用 for 属性关联 id，点击文字也能选中按钮。
- 示例：
<input type="radio" id="male" name="gender" value="male"><label for="male">男</label> - 避免同一组中多个 checked，防止逻辑混乱。
- 服务端获取数据时，根据 name 获取对应 value，前端可通过 JavaScript 获取选中值。
基本上就这些。掌握 name 分组和 checked 默认选中，就能正确使用 HTML 单选按钮了。
