HTML 单选按钮选定值获取方法指南：解决“undefined”问题

2024-03-14 05:43:07

## 获取选定单选按钮的值

### 问题

在 HTML 表单中，我们需要获取一组单选按钮中选定的按钮值。然而，使用 document.getElementById() 获取 DIV 元素的 value 属性会导致返回 "undefined"。

### 解决方案

为了解决这个问题，我们需要使用 querySelector 来获取选中的 INPUT 元素：

var rates = document.querySelector('input[name="rate"]:checked').value;

此代码会选择具有 name="rate" 属性且已选中的第一个 INPUT 元素。

### 代码示例

<!-- HTML 代码 -->
<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>

// JavaScript 代码
var rates = document.querySelector('input[name="rate"]:checked').value;

// 根据选定的值执行相应操作（仅为示例）
if (rates == 'Fixed Rate') {
  // ...
} else if (rates == 'Variable Rate') {
  // ...
} else if (rates == 'Multi Rate') {
  // ...
}

### 常见问题解答

1. 为什么使用 querySelector？

querySelector 能够选择符合指定条件的第一个元素，而 getElementById 只适用于具有唯一 ID 的元素。对于单选按钮组，所有按钮都具有相同的名称，因此无法使用 getElementById。

2. 可以使用 querySelectorAll 来获取所有选中的单选按钮吗？

是的，可以使用 querySelectorAll 来获取所有选中的单选按钮：

var rates = document.querySelectorAll('input[name="rate"]:checked');

3. 如何在按钮未选中时获取值？

如果没有任何按钮被选中，则 rates 变量将为空。可以通过以下代码处理这种情况：

if (rates) {
  // rates 不为空，执行操作
} else {
  // rates 为空，执行其他操作
}

4. 如何动态地获取选定的按钮值？

可以使用事件侦听器来动态地获取选定的按钮值：

document.querySelectorAll('input[name="rate"]').forEach((radio) => {
  radio.addEventListener('change', (event) => {
    var rates = event.target.value;
    // 执行相应操作
  });
});