如何使用JavaScript获取单选按钮的值

在Web开发中，使用JavaScript获取单选按钮（radio）的值是一项常见的需求。以下是如何实现这一功能的专业指南。

HTML结构

首先，你需要有HTML单选按钮的标记。以下是一个基本的示例：

Option 1 Option 2 Option 3

注意：所有具有相同`name`属性的`radio`按钮被视为一组，用户只能选择其中一个。

使用JavaScript获取值

通过DOM元素选择器

你可以使用JavaScript的DOM选择器来获取被选中的单选按钮的值。

// 获取所有具有相同name的单选按钮
const radioButtons = document.querySelectorAll('input[name="myRadio"]');

// 获取选中的单选按钮的值
let selectedValue;
radioButtons.forEach(radio => {
if (radio.checked) {
selectedValue = radio.value;
}
});

// 输出选中的单选按钮的值


console.log(selectedValue); // 如果有选中的单选按钮，将输出对应的值

通过`document.querySelector`

如果组内的单选按钮只能选择一个，你可以使用更简洁的方法：

const selectedValue = document.querySelector('input[name="myRadio"]:checked').value;

// 输出选中的单选按钮的值
console.log(selectedValue); // 如果有选中的单选按钮，将输出对应的值

这种方法基于CSS选择器，选择所有被选中的`input`元素，其中`name`属性为`myRadio`。

通过`form`元素的`elements`属性

你还可以使用`form`元素的`elements`属性，这是一个与表单内所有元素的集合。

// 假设form元素的ID是'myForm'
const form = document.getElementById('myForm');
const selectedValue = form.elements['myRadio'].value;

// 输出选中的单选按钮的值
console.log(selectedValue); // 如果有选中的单选按钮，将输出对应的值

注意：这种方法仅在你只有一个名为`myRadio`的单选按钮组时适用。