简介
在编写 Web 应用程序时，通过使用单选按钮允许用户从一组选项中进行选择是非常常见的。用户选择一个选项时，我们需要获取该单选按钮的 value 属性值，以便将数据保存到数据库中或执行其他任何操作。在本文中，我们将探讨如何使用 JavaScript 获取选定单选按钮的值。
HTML 中的单选按钮
HTML 中的单选按钮通过使用 <input> 标签以及 type="radio" 属性来创建。 当用户从单选按钮组中选择一个选项时，只有一个单选按钮可以被同时选中，其他的单选按钮都必须处于未选中状态。
下面是一个简单的 HTML 单选按钮示例：
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
在上述示例中，有两个单选按钮，它们都有相同的 name 属性。这意味着它们是同一组单选按钮。只有当选中其中一个单选按钮时，才会将 value 属性的值传递到服务器。这是通过使用 JavaScript 获取选中的单选按钮的值的关键。
获取选中单选按钮的值
方式1：querySelector()
使用 querySelector() 方法可以获取选中单选按钮的值。该方法通过遍历同一 name 值的单选按钮组，选择被选中的单选按钮元素。
下面是一个获取选中单选按钮的值的 JavaScript 函数示例：
function getSelectedValue() {
var ele = document.getElementsByName('gender');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
return ele[i].value;
}
}
在上述示例中，document.getElementsByName('gender') 返回一个 NodeList 对象（可以看作是一个数组）。该 NodeList 包含了与指定名称相同的所有元素，然后 for 循环遍历这个 NodeList 中的所有元素，当某个单选按钮被选中时，使用 if 语句返回该单选按钮的值。
方式2：getElementById()
如果每个单选按钮都有一个唯一的 id 属性，我们可以使用 getElementById() 方法来获取选中单选按钮的值。
下面是一个获取选中单选按钮的值的 JavaScript 函数示例：
function getSelectedValue() {
var ele = document.getElementById('gender');
if(ele.checked)
return ele.value;
}
在上述示例中，我们使用了一个具有唯一 id 属性值“gender”的单选按钮的 getElementById() 方法。然后检查该单选按钮是否被选中并返回其值。
示例
下面是完整的 HTML 和 JavaScript 代码示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
<button onclick="alert(getSelectedValue())">Get Selected Value</button>
<script>
function getSelectedValue() {
var ele = document.getElementsByName('gender');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
return ele[i].value;
}
}
</script>
</body>
</html>
上述代码在一个包含两个单选按钮的表单中展示了如何获取选中单选按钮的值。当用户单击 “Get Selected Value” 按钮时，它将调用 JavaScript 函数并弹出选中的单选按钮的值。
结论
在本文中，我们讨论了如何使用 JavaScript 获取选中单选按钮的值。我们使用了两种不同的方法：使用 querySelector() 和使用 getElementById() 方法。这两种方法都能够实现相同的目标。但是，在开发 Web 应用程序时，最好根据需要选择最适合您应用程序的方法，并保持代码简洁易懂。