正文

如何从JavaScript中提取单选框的值？详解获取单选按钮选中项的简单方法

/0 浏览量
1102

在网页开发中，单选框（radio button）是一种常见的表单控件，用于在多个选项中选择一个。JavaScript 提供了多种方法来获取单选按钮的选中值。以下是一些简单而实用的方法来获取单选按钮选中项的值。

获取单个单选按钮的值

首先，假设我们有一个HTML单选按钮组，如下所示：

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

要获取选中项的值，你可以使用以下JavaScript代码：

// 获取所有name为'gender'的单选按钮
var radios = document.getElementsByName('gender');

// 遍历单选按钮，检查哪个被选中
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    // 输出选中项的值
    console.log("选中的值是: " + radios[i].value);
    break; // 选中项找到后即可退出循环
  }
}

这段代码首先获取所有name属性为gender的单选按钮，然后遍历这些按钮，检查它们的checked属性是否为true。一旦找到被选中的单选按钮，它就会输出该按钮的value属性值。

获取一组单选按钮的选中值

如果你想要获取一组单选按钮中所有选中项的值，你可以稍微修改上面的代码：

var selectedValues = [];

for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    selectedValues.push(radios[i].value);
  }
}

console.log("选中的值有: " + selectedValues.join(", "));

这段代码会收集所有被选中的单选按钮的值，并将它们存储在一个数组selectedValues中。最后，使用join方法将数组中的所有值以逗号分隔的形式输出。

使用document.querySelector或document.querySelectorAll

如果你只需要获取单个被选中的单选按钮的值，也可以使用document.querySelector或document.querySelectorAll方法：

// 使用querySelector获取单个被选中的单选按钮
var selectedRadio = document.querySelector('input[name="gender"]:checked');
console.log("选中的值是: " + selectedRadio.value);

// 使用querySelectorAll获取所有被选中的单选按钮
var selectedRadios = document.querySelectorAll('input[name="gender"]:checked');
var selectedValues = Array.from(selectedRadios).map(function(radio) {
  return radio.value;
});

console.log("选中的值有: " + selectedValues.join(", "));

这些方法利用CSS选择器来直接获取选中的单选按钮，从而避免了循环遍历所有单选按钮。

通过上述方法，你可以轻松地从JavaScript中提取单选框的值，并将其用于进一步的逻辑处理或显示在网页上。希望这些方法能够帮助你更好地理解如何在网页中处理单选按钮。

-- 展开阅读全文 --