1. 简介
在HTML中，radio button（单选按钮）是一种用于在选项中选择一个的表单元素。它通常与其他相关的选项一起使用，如多选框和复选框。
2. 基本使用
使用radio button首先需要在HTML中创建一个元素，并设置type属性为"radio"，这样就定义了一个单选按钮。
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female
在上述代码中，我们创建了两个单选按钮，它们都有相同的name属性，这样就产生了一个组。只有同一组内的单选按钮中，我们才可以选择一个。
3. name属性
在上面的例子中，我们给了每个单选按钮相同的name属性值，这是因为我们希望它们在同一组中。每个单选按钮都需要有一个唯一的value属性值，它代表了我们选择这个选项时提交的值。
4. checked属性
如果我们希望初始状态下某个选项被选中，可以使用checked属性。
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female
在上述代码中，Male选项会在页面加载时自动被选中。
5. label标签
想要为单选按钮添加文本描述时，可以使用
<input type="radio" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" name="gender" value="female">
<label for="female">Female</label>
上述代码中，我们使用for属性和相应的元素的id属性关联了
6. CSS样式
通过CSS可以对单选按钮进行样式修改，从而使其更符合网页的设计风格。
input[type="radio"] {
/* 添加自定义样式 */
}
上述代码中，我们使用了input[type="radio"]选择器来选择所有的单选按钮，并对其应用自定义样式。
7. JavaScript操作
使用JavaScript，我们可以对单选按钮进行操作和控制。例如，可以使用JavaScript来获取选中的单选按钮的值。
const radios = document.getElementsByName('gender');
let selectedValue;
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
上述代码中，我们首先通过document.getElementsByName('gender')获取所有'name'属性值为'gender'的单选按钮，并储存在一个数组中。然后使用for循环遍历数组，找到被选中的单选按钮，并将其值存储在selectedValue变量中。
8. 总结
通过本文，我们了解了如何在HTML中使用和操作radio button。我们可以使用name属性来将多个单选按钮关联成一组，使用checked属性来设置初始状态，使用label标签添加描述文本，通过CSS样式进行自定义，以及使用JavaScript来操作和获取选中的值。
使用radio button可以为用户提供更友好的选择界面，提高交互性和用户体验。