JavaScript获取选定单选按钮值的方法

在网页开发中，经常会遇到需要获取用户选择的单选按钮值的情况。JavaScript提供了多种方式来实现这一功能，下面我们就来详细探讨一下。

通过name属性获取单选按钮组

可以利用单选按钮的name属性。在HTML中，同一组单选按钮通常具有相同的name属性值。例如：

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

在JavaScript中，可以使用getElementsByName方法来获取具有相同name的所有单选按钮元素。代码如下：

const radioButtons = document.getElementsByName('gender');
for (let i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('click', function() {
        const selectedValue = this.value;
        console.log(selectedValue);
    });
}

上述代码中，首先获取了名为gender的所有单选按钮，然后为每个按钮添加了点击事件监听器。当用户点击某个按钮时，this.value就可以获取到当前被选中按钮的值，并通过console.log打印出来。

使用querySelector方法

querySelector方法可以通过CSS选择器来获取元素。对于单选按钮，可以使用属性选择器。例如：

<input type="radio" name="color" value="red"> 红色
<input type="radio" name="color" value="blue"> 蓝色

JavaScript代码如下：

const radioButtons = document.querySelectorAll('input[type="radio"][name="color"]');
radioButtons.forEach(function(radio) {
    radio.addEventListener('click', function() {
        const selectedValue = this.value;
        console.log(selectedValue);
    });
});

这里使用querySelectorAll获取了所有type为radio且name为color的元素，然后通过遍历为每个元素添加点击事件监听器，同样可以获取用户选择的值。

获取当前选中的单选按钮

有时候我们需要直接获取当前被选中的单选按钮。可以使用以下方法：

<input type="radio" name="size" value="small"> 小
<input type="radio" name="size" value="medium"> 中
<input type="radio" name="size" value="large"> 大

function getSelectedValue() {
    const radioButtons = document.querySelectorAll('input[type="radio"][name="size"]');
    for (let i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
            return radioButtons[i].value;
        }
    }
    return null;
}
const selected = getSelectedValue();
console.log(selected);

在这个例子中，getSelectedValue函数遍历所有单选按钮，通过checked属性判断哪个按钮被选中，并返回其值。

掌握这些JavaScript获取选定单选按钮值的方法，能够帮助开发者更好地处理用户输入，提升网页的交互性和功能性。无论是简单的表单处理还是复杂的业务逻辑实现，这些技巧都十分实用。