js radio 选中|极客笔记

js radio 选中

在网页开发中，有时我们需要使用单选框（radio）来让用户进行选择。单选框可以让用户在一组选项中只选择一个，常见于调查问卷、表单填写等场景。在本文中，我们将详细讨论如何使用JavaScript来控制单选框的选中状态。

单选框的基本用法

在HTML中，单选框通过<input type="radio">来定义，其中type属性值为radio表示这是一个单选框。单选框通常放在<form>标签内，用户可以通过点击单选框来做出选择。

下面是一个简单的单选框示例：

<form>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
</form>

在上面的示例中，我们创建了一个表单，包含了两个单选框，分别是”Male”和”Female”。这两个单选框的name属性值均为”gender”，这意味着它们是同一组单选框，用户只能选择其中一个。

JavaScript 控制单选框选中状态

在实际开发中，我们经常需要通过JavaScript来动态控制单选框的选中状态。下面我们将讨论几种常见的场景，并给出相应的代码示例。

1. 获取选中的单选框的值

有时我们需要获取用户选择的单选框的值，以便后续操作。可以通过以下代码来实现：

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

for (const radio of radios) {
  if (radio.checked) {
    selectedValue = radio.value;
    break;
  }
}

console.log(selectedValue);

在上面的代码中，我们首先通过document.getElementsByName('gender')获取所有name属性值为”gender”的单选框，然后遍历每个单选框，如果checked属性为true，表示该单选框被选中，我们就可以获取到其value属性值。

2. 设置单选框的选中状态

有时我们需要通过程序来设置某个单选框的选中状态。可以通过以下代码来实现：

const maleRadio = document.querySelector('input[value="male"]');
maleRadio.checked = true;

在上面的代码中，我们首先通过document.querySelector('input[value="male"]')获取value属性值为”male”的单选框，然后将其checked属性设置为true，从而将该单选框设为选中状态。

3. 监听单选框的选中事件

有时我们需要在用户选择单选框时执行一些操作，可以通过监听单选框的change事件来实现。下面是一个示例代码：

document.getElementsByName('gender').forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      console.log(`Selected value: ${this.value}`);
    }
  });
});

在上面的代码中，我们使用forEach方法遍历所有名为”gender”的单选框，然后为每个单选框添加change事件监听器。当用户选中某个单选框时，会触发相应的回调函数，并输出选中的值。