input单选组radio,点击事件

封面图 • 2025-11-01 • jQuery

在 HTML 和 JavaScript 中，`<input type="radio">` 是用于创建单选按钮的元素。当用户点击某个单选按钮时，可以通过 JavaScript 监听其 `click` 事件或 `change` 事件来执行相应的操作。

---

### ✅ 示例：使用 `click` 事件

```html
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>

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

maleRadio.addEventListener('click', function() {
    console.log('Male selected');
  });

femaleRadio.addEventListener('click', function() {
    console.log('Female selected');
  });
</script>
```

---

### ✅ 示例：使用 `change` 事件（推荐）

`change` 事件通常在用户选择一个选项后触发，适用于表单控件，包括单选按钮。

```html
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>

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

radios.forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.checked) {
        console.log('Selected: ' + this.value);
      }
    });
  });
</script>
```

---

### 📌 注意事项：

- 使用 `name` 属性将多个单选按钮分组，确保只能选一个。
- `change` 事件比 `click` 更可靠，因为 `click` 可能会在用户取消选择时也触发。
- 如果你需要获取当前选中的值，可以遍历所有同名的单选按钮，检查哪个是 `checked` 的。

---

### ✅ 获取当前选中值的示例：

```javascript
const selectedValue = document.querySelector('input[name="gender"]:checked').value;
console.log('Selected value:', selectedValue);
```

---

如果你使用的是前端框架（如 Vue、React、Angular），监听单选按钮的点击事件方式会略有不同，欢迎告诉我你用的框架，我可以提供更具体的示例。