HTML DOM Input - Radio 对象

HTML 中的 <input> 标签用于创建各种输入控件，其中的 radio 类型用于创建单选按钮。单选按钮允许用户从一组选项中选择一个。

属性

• type: 指定输入类型为单选按钮，值为 "radio"。
• name: 定义单选按钮所属的组，同一组中的单选按钮只能选择一个。
• value: 定义单选按钮的值，当选中该按钮时，将提交该值给服务器。

示例

// www.javascriptcn.com code example
<form>
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">Male</label><br>

  <input type="radio" name="gender" value="female" id="female">
  <label for="female">Female</label><br>

  <input type="radio" name="gender" value="other" id="other">
  <label for="other">Other</label>
</form>

在上面的示例中，我们创建了一个包含三个单选按钮的表单，每个单选按钮都有不同的值，并且它们都属于同一个 gender 组。

单选按钮的 id 属性和 label 标签的 for 属性相互关联，点击 label 标签时，将选中相应的单选按钮。

JavaScript 操作

// www.javascriptcn.com code example
// 获取所有单选按钮
const radios = document.querySelectorAll('input[type="radio"]');

// 循环遍历单选按钮
radios.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.checked) {
      console.log(`Selected gender: ${radio.value}`);
    }
  });
});

在 JavaScript 中，我们可以使用 querySelectorAll 方法获取所有的单选按钮，然后添加 change 事件监听器，以便在用户选择单选按钮时执行相应的操作。