在处理网页表单时，获取单选框的值是一个常见的需求。单选框（Radio Button）允许用户在多个选项中选择一个。在原生JavaScript中，有几种方法可以轻松获取单选框的值。下面，我将详细介绍几种常用的方法，并辅以代码示例，帮助您更好地理解和应用。
方法一：直接访问属性 value
每个单选框都有一个 value 属性，它包含了单选框的值。你可以通过以下方式获取选中的单选框的值：
// 假设有一个单选框，其ID为 "radio1"
var selectedValue = document.getElementById("radio1").value;
console.log(selectedValue); // 输出单选框的值
这种方法适用于只有一个单选框被选中，且没有其他操作导致状态改变的情况下。
方法二：使用 querySelector 选择器
如果你想通过类名或标签名来选择单选框，可以使用 querySelector 方法：
// 假设所有单选框都有类名 "radio-option"
var selectedValue = document.querySelector('input[type="radio"].radio-option:checked').value;
console.log(selectedValue); // 输出选中的单选框的值
这个方法更加灵活，可以用来选择具有特定类名或标签名的单选框。
方法三：遍历所有单选框并比较 checked 状态
当有多个单选框组时，你可能需要遍历所有单选框，并检查它们的 checked 状态来找到选中的单选框：
// 假设有一个名为 "radio-group" 的单选框组
var radios = document.getElementsByName("radio-group");
var selectedValue = null;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
console.log(selectedValue); // 输出选中的单选框的值
这个方法适用于单选框分组的情况，当你需要从多个选项中获取一个值时特别有用。
方法四：使用事件监听器
如果你想监听单选框的选中状态变化，可以使用事件监听器：
// 为所有单选框添加 "change" 事件监听器
document.querySelector('input[type="radio"].radio-option').addEventListener('change', function() {
console.log(this.value); // 当单选框状态改变时，输出其值
});
这种方法允许你在单选框状态改变时执行特定的代码，比如更新页面上的其他内容。
总结
以上四种方法都可以用来获取原生JS中的单选框值。根据你的具体需求选择最合适的方法。记住，在处理表单和用户输入时，确保代码的健壮性和错误处理是非常重要的。希望这些小技巧能帮助你更好地使用原生JavaScript。