单选按钮 getElementsByName - JavaScript

在 JavaScript 中，可以使用 getElementsByName 方法来获取指定名称的单选按钮。该方法返回一个 NodeList 对象，由带有指定名称的所有单选按钮组成。

语法

elements = document.getElementsByName(name);

参数

• name: 要查找的单选按钮的名称，字符串类型。

返回值

返回一个 NodeList 对象，其中包含所有 name 属性与指定值匹配的 input 元素。

示例

<form>
  <label><input type="radio" name="size" value="small"> Small</label>
  <label><input type="radio" name="size" value="medium" checked> Medium</label>
  <label><input type="radio" name="size" value="large"> Large</label>
</form>

<script>
const radios = document.getElementsByName('size');
radios.forEach(radio => {
  radio.addEventListener('change', () => {
    console.log(`Selected size: ${radio.value}`);
  });
});
</script>

在上面的示例中，我们获取了名称为 size 的所有单选按钮，并为它们添加了一个事件监听器。当用户更改选项时，我们打印出当前选择的值。

注意事项

• getElementsByName 返回的是一个 NodeList 对象，而不是数组。但可以使用 Array.from() 方法将其转换为数组，允许我们使用数组方法，如 forEach，map 等。
• 在 IE8 及更早版本中，getElementsByName 方法有时可能会返回不正确的结果。在这种情况下，建议使用现代的查询方法，如 querySelectorAll。