HTML中的单选按钮由<input>标签实现，类型为radio，主要用于让用户在多个互斥选项中选择其中一个，是表单交互中非常基础且常用的组件。它的核心功能依赖于几个关键属性的配合，不同属性承担着不同的作用。
HTML单选按钮的基础属性
要实现单选按钮的基础功能，需要了解以下几个核心属性：
- type：必须设置为radio，标识当前input元素是单选按钮类型。
- name：用于标识单选按钮的分组，相同name值的单选按钮会被归为同一组，同一组内只能选中一个选项。
- value：当单选按钮被选中时，该值会被提交到后端，是表单提交时的实际数据内容。
- checked：布尔属性，添加该属性后，单选按钮会默认处于选中状态。
- id：用于和<label>标签的for属性关联，提升用户点击交互的体验，点击label文本也会触发对应单选按钮的选中。
单选按钮的分组实现
单选按钮的分组完全依赖name属性，只要多个radio类型的input元素拥有相同的name值，它们就属于同一个分组，同一分组内的选项互斥，只能选择一个。如果name值不同，即使都是radio类型，也不会产生互斥效果，会变成各自独立的单选组。
下面是一个性别选择的分组示例，两个单选按钮的name都是gender，因此只能选择其中一个：
<form> <p>请选择性别：</p> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </form>
如果新增一个不同name的单选按钮，它就不会和上面的性别选项互斥：
<form> <p>请选择性别：</p> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> <p>是否订阅通知：</p> <input type="radio" id="subscribe_yes" name="subscribe" value="1"> <label for="subscribe_yes">是</label> <input type="radio" id="subscribe_no" name="subscribe" value="0"> <label for="subscribe_no">否</label> </form>
上面的代码中，name为gender的是性别分组，name为subscribe的是订阅分组，两个分组之间互不影响，各自可以独立选择一个选项。
设置单选按钮默认选中
要给单选按钮设置默认选中状态，只需要在对应的<input>标签上添加checked属性即可。如果是同一分组，只能给其中一个单选按钮添加checked属性，否则最后一个带checked属性的选项会被默认选中。
下面的示例中将性别选项的“男”设置为默认选中：
<form> <p>请选择性别：</p> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </form>
如果是动态设置默认选中，也可以通过JavaScript操作DOM实现，比如下面的代码会在页面加载完成后将value为female的选项设置为选中：
// 页面加载完成后执行
window.onload = function() {
// 获取所有name为gender的单选按钮
const genderRadios = document.querySelectorAll('input[name="gender"]');
// 遍历找到value为female的选项并设置为选中
genderRadios.forEach(radio => {
if (radio.value === 'female') {
radio.checked = true;
}
});
};
常见问题说明
为什么单选按钮点击后无法取消选中？
这是radio类型的默认行为，同一分组内一旦选中一个选项，就不能通过再次点击该选项取消选中，只能选择同组的其他选项。如果需要可以取消选中的效果，可以考虑使用checkbox类型，或者通过JavaScript额外实现取消逻辑。
表单提交时单选按钮的值怎么获取？
单选按钮被选中后，提交表单时会将name属性值=选中项的value值作为键值对提交。比如上面的性别分组选中“男”，提交的数据就是gender=male。如果没有任何选项被选中，该分组不会提交任何数据。
多个分组的name值可以相同吗？
不可以，name值相同的radio会被归为同一组，会失去分组互斥的效果，因此不同分组的单选按钮一定要设置不同的name值。