获取按钮组的值 - JavaScript

在Web界面中，我们经常需要让用户从多个选项中选择一个选项。为此，我们可以使用按钮组。按钮组通常由多个单选按钮组成，用户可以在其中选择一个选项。

当用户点击其中一个单选按钮时，我们需要获取其值以进行后续操作。在JavaScript中，我们可以使用以下方法来获取按钮组的值:

方法1: 查询选中的单选按钮

我们可以使用querySelectorAll方法来选择按钮组中的单选按钮，然后遍历它们并检查哪个按钮被选中。一旦我们找到选中的单选按钮，我们就可以获取其值。

以下是一个示例程序，用于获取以下HTML代码中的按钮组的值:

<div id="myButtons">
  <input type="radio" name="color" value="red"> 红色
  <input type="radio" name="color" value="green"> 绿色
  <input type="radio" name="color" value="blue"> 蓝色
</div>

const buttons = document.querySelectorAll('#myButtons input[type="radio"]');
let selectedValue;

buttons.forEach((button) => {
  if (button.checked) {
    selectedValue = button.value;
    return;
  }
});

console.log(selectedValue);

以上代码将打印所选单选按钮的值。

方法2: 添加事件监听器

我们还可以为单选按钮添加事件监听器，并在选定时获取其值。

以下是一个示例程序，它演示了如何在单击任何单选按钮时获取按钮组的值：

<div id="myButtons">
  <input type="radio" name="color" value="red"> 红色
  <input type="radio" name="color" value="green"> 绿色
  <input type="radio" name="color" value="blue"> 蓝色
</div>

const buttons = document.querySelectorAll('#myButtons input[type="radio"]');

buttons.forEach((button) => {
  button.addEventListener('click', (event) => {
    console.log(event.target.value);
  });
});

以上代码将在单击任何单选按钮时打印其值。

以上是两种获取按钮组值的方法。可以根据具体情况选择哪种方法。