input单选组（radio）, 选中事件

封面图 • 2025-11-19 • JavaScript

在 HTML 和 JavaScript 中，`<input type="radio">` 是用于创建单选按钮的元素。当用户选择一个单选按钮时，会触发“选中事件”（change 事件）。

下面是关于 `input` 单选组（radio group）的选中事件的说明和示例：

---

### ✅ 一、HTML 结构

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

<input type="radio" id="option2" name="gender" value="female">
<label for="option2">女</label>
```

- `name` 属性相同，表示它们属于同一个单选组。
- `value` 是选中后的值。

---

### ✅ 二、JavaScript 监听选中事件（change 事件）

```javascript
document.querySelectorAll('input[name="gender"]').forEach(radio => {
    radio.addEventListener('change', function () {
        if (this.checked) {
            console.log('你选择了：' + this.value);
        }
    });
});
```

---

### ✅ 三、使用 jQuery 的方式（可选）

如果你使用了 jQuery：

```javascript
$('input[name="gender"]').on('change', function () {
    console.log('你选择了：' + $(this).val());
});
```

---

### ✅ 四、注意事项

- `change` 事件会在用户选择不同的选项后触发。
- 如果你想在页面加载时获取默认选中的值，也可以通过 `document.querySelector` 或 `jQuery` 获取。

---

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

```javascript
const selected = document.querySelector('input[name="gender"]:checked');
if (selected) {
    console.log('当前选中的是：' + selected.value);
}
```

---

如需进一步处理表单数据或验证，请告诉我你的具体需求！