正文

JavaScript 获取单选框选中值：简单方法助你轻松获取用户选择

/0 浏览量
1109

在网页开发中，单选框是一种常见的表单元素，用于让用户从一组选项中选择一个。JavaScript 提供了多种方法来获取单选框的选中值，使得开发者能够根据用户的选择执行相应的操作。本文将介绍几种简单而有效的方法，帮助你轻松获取单选框的选中值。

方法一：使用 value 属性

单选框的 value 属性可以直接获取其选中的值。这种方法简单直接，适合大多数情况。

// 假设有一个单选框的 HTML 结构如下：
// <input type="radio" name="gender" value="male"> 男
// <input type="radio" name="gender" value="female"> 女

// 获取选中值
var selectedValue = document.querySelector('input[name="gender"]:checked').value;
console.log(selectedValue); // 输出 "male" 或 "female"

方法二：使用 getElementsByName 方法

如果你的页面中有多个单选框组，可以使用 getElementsByName 方法获取所有同名单选框的集合，然后遍历这个集合来找到选中的单选框。

// 假设有一个单选框组的 HTML 结构如下：
// <input type="radio" name="color" value="red"> 红色
// <input type="radio" name="color" value="green"> 绿色
// <input type="radio" name="color" value="blue"> 蓝色

// 获取选中值
var radios = document.getElementsByName('color');
for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        var selectedValue = radios[i].value;
        console.log(selectedValue); // 输出 "red", "green" 或 "blue"
        break;
    }
}

方法三：使用 querySelectorAll 和 forEach 方法

如果你需要处理多个单选框组，并且每个组中的单选框有不同的 name 属性，可以使用 querySelectorAll 和 forEach 方法来遍历所有单选框，并获取选中值。

// 假设有两个单选框组的 HTML 结构如下：
// <input type="radio" name="color1" value="red"> 红色
// <input type="radio" name="color1" value="green"> 绿色
// <input type="radio" name="color1" value="blue"> 蓝色
// <input type="radio" name="color2" value="red"> 红色
// <input type="radio" name="color2" value="green"> 绿色
// <input type="radio" name="color2" value="blue"> 蓝色

// 获取选中值
var radioGroups = document.querySelectorAll('input[type="radio"]');
radioGroups.forEach(function(radio) {
    if (radio.checked) {
        console.log(radio.name + ": " + radio.value); // 输出 "color1: red", "color1: green" 或 "color1: blue"
    }
});

总结

通过以上三种方法，你可以轻松地在 JavaScript 中获取单选框的选中值。根据你的具体需求，选择最适合你的方法。希望本文能帮助你更好地理解和应用这些方法。

-- 展开阅读全文 --