监听radio分组应使用change事件而非click，推荐事件委托绑定父容器；也可批量绑定但不支持动态新增；获取选中值用document.querySelector('input[name="xxx"]:checked')。
监听单选按钮（radio）分组切换，核心是给同一 name 的所有 input[type="radio"] 绑定 change 事件，而不是 click —— 因为 change 只在选项真正被选中（且值发生改变）时触发，语义更准确，避免重复响应。
用事件委托监听整个分组
推荐方式：把事件监听器绑定到父容器（如 form 或 fieldset），利用事件冒泡捕获目标 radio。这样无需遍历每个按钮，也支持动态添加的 radio。
示例：
document.querySelector('form').addEventListener('change', function (e) {
if (e.target.type === 'radio' && e.target.name === 'gender') {
console.log('选中了：', e.target.value); // 如 'male' 或 'female'
}
});
直接监听特定 name 的所有 radio 元素
如果分组固定、数量不多，也可显式获取并批量绑定：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
document.querySelectorAll('input[name="gender"]').forEach(radio => {
radio.addEventListener('change', function () {
console.log('当前选中值：', this.value);
});
});
注意：这种方式对后续 JS 动态插入的新 radio 无效，需重新绑定或改用事件委托。
获取当前选中的值（任何时候都可用）
除了监听，你可能还需要主动读取当前选中项。最简洁安全的方式是：
const selected = document.querySelector('input[name="gender"]:checked');
const value = selected ? selected.value : null;
不建议用 querySelectorAll(...)[0] 或遍历判断 checked，上面一行即可准确获取。
避免常见坑
-
别用
click代替change：用户连续点击同一个 radio 时，click会触发两次，change不会（因为值没变）。 -
确保所有 radio 的
name属性完全一致（包括大小写和空格），否则浏览器不认为它们属于同一组。 -
初始状态未选中时，
:checked查询结果为null，记得判空。
