JS（JavaScript）是一种广泛应用于网页开发中的编程语言，它为我们提供了丰富的交互性和动态效果。在开发网页时，经常会用到单选按钮来让用户选择一个选项。本文将介绍如何设置单选按钮的默认值，并提供一些相关的示例代码。
理解单选按钮
在HTML中，单选按钮通过<input type="radio">元素来表示。其中type属性的值设置为radio，说明这是一个单选按钮。每个单选按钮都有一个相关联的name属性，用于将它们分组成一个组。单选按钮的value属性用于标识用户选择的选项。
设置默认值
要设置单选按钮的默认值，我们可以使用JavaScript来操作它们的checked属性。checked属性是一个布尔值，用于表示单选按钮是否被选中。
下面是一个设置单选按钮默认值的示例：
<input type="radio" name="gender" value="male" id="maleRadio">
<label for="maleRadio">男性</label><br>
<input type="radio" name="gender" value="female" id="femaleRadio">
<label for="femaleRadio">女性</label>
<script>
// 设置femaleRadio为默认选中
document.getElementById("femaleRadio").checked = true;
</script>
在上面的示例中，我们将femaleRadio设置为默认选中。在JavaScript代码块中，我们使用getElementById方法获取到单选按钮元素，然后将checked属性设置为true，即可将该单选按钮设为选中状态。
更多操作
除了设置单选按钮的默认值，我们还可以做一些其他的操作。下面是一些常见的单选按钮操作示例：
获取选中的值
要获取用户选择的选项，可以使用以下代码：
<input type="radio" name="gender" value="male" id="maleRadio">
<label for="maleRadio">男性</label><br>
<input type="radio" name="gender" value="female" id="femaleRadio">
<label for="femaleRadio">女性</label>
<button onclick="getSelectedValue()">获取选中的值</button>
<script>
function getSelectedValue() {
var radios = document.getElementsByName("gender");
var selectedValue = "";
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
alert("选中的值是：" + selectedValue);
}
</script>
在上面的示例中，我们使用getElementsByName方法获取到所有名为gender的单选按钮。然后，通过遍历单选按钮列表，找到被选中的单选按钮，并获取它的值。
动态改变选项
有时候，我们需要根据用户的选择，动态改变其他元素的状态或内容。下面是一个示例代码：
<input type="radio" name="gender" value="male" id="maleRadio" onchange="changeContent()">
<label for="maleRadio">男性</label><br>
<input type="radio" name="gender" value="female" id="femaleRadio" onchange="changeContent()">
<label for="femaleRadio">女性</label><br>
<div id="content"></div>
<script>
function changeContent() {
var radios = document.getElementsByName("gender");
var contentDiv = document.getElementById("content");
var selectedValue = "";
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
if (selectedValue === "male") {
contentDiv.innerHTML = "您选择了男性";
} else if (selectedValue === "female") {
contentDiv.innerHTML = "您选择了女性";
} else {
contentDiv.innerHTML = "";
}
}
</script>
在上面的示例中，我们为单选按钮添加了onchange事件处理程序changeContent。该事件处理程序在用户选择不同选项时触发。在changeContent中，我们根据用户选择的值，动态改变了一个<div>元素的内容。
结论
通过JavaScript，我们可以方便地设置单选按钮的默认值，并根据用户选择做出相应的操作。以上就是一些常见的单选按钮操作示例，希望能帮助到你在网页开发中处理单选按钮的相关问题。
参考文献：
本文来自极简博客，作者：紫色星空下的梦，转载请注明原文链接：JS单选按钮的默认值
