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

在前端开发中，单选按钮是一个常见的用户输入控件。当用户在一组单选按钮中选择了一个选项时，我们需要获取该选项的值来进行后续的处理。本文将介绍如何使用 JavaScript 获取选定单选按钮的值。

HTML

我们先创建一组单选按钮，HTML 代码如下：

<form>
  <input type="radio" name="fruit" value="apple"> Apple<br>
  <input type="radio" name="fruit" value="banana"> Banana<br>
  <input type="radio" name="fruit" value="orange"> Orange
</form>

使用 name 属性来指定一组单选按钮，使用 value 属性来指定每个单选按钮的值。

JavaScript

我们可以使用 document.querySelector 方法来获取选中的单选按钮，如下所示：

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

解释一下上述代码：

• document.querySelector('input[name="fruit"]:checked') 获取选中的单选按钮节点。
• value 获取该节点的值。

需要注意的是，如果没有选中任何单选按钮，document.querySelector('input[name="fruit"]:checked') 返回 null。因此，我们需要添加错误处理。

完整代码如下：

const radios = document.getElementsByName('fruit');
let selectedValue = null;

for (let i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    selectedValue = radios[i].value;
    break;
  }
}

if (selectedValue) {
  console.log(`You selected: ${selectedValue}`);
} else {
  console.log('Please select a fruit.');
}

解释一下上述代码：

• document.getElementsByName('fruit') 获取所有单选按钮节点。
• 遍历单选按钮节点，找到被选中的单选按钮，获取它的值。
• 如果找到被选中的单选按钮，输出该值；否则，提示用户选择一个水果。

至此，我们介绍了如何使用 JavaScript 获取选定单选按钮的值。