最可靠的方式是使用 change 事件监听单选框切换，因其在值真正改变时触发、语义准确且避免重复；推荐绑定到父容器利用事件委托，并确保同组单选框 name 相同。

监听单选框（<input type="radio">）的切换事件，最可靠的方式是使用 change 事件，而不是 click。因为 change 在用户真正选中某个选项、值发生改变时才触发，语义更准确，也避免重复触发。

用 change 事件监听单选组

单选框通常成组出现（共享相同的 name 属性），只需为该组任意一个或全部单选框绑定 change 事件即可。推荐绑定到父容器（如 <form></form> 或 <div>），利用事件委托提升性能和兼容动态添加的情况。 <ul> <li>确保所有单选框有相同的 <code>name，这是分组识别的关键

在事件处理函数中，通过 event.target 获取当前被选中的元素

用 event.target.value 直接读取选中项的值

示例 HTML：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

  男
  女
  其他

对应 JS：

document.getElementById('gender-group').addEventListener('change', function (e) {
  if (e.target.type === 'radio' && e.target.name === 'gender') {
    console.log('当前选中值：', e.target.value); // 如 'female'
  }
});

获取当前选中值的其他方式

除了在 change 中取 e.target.value，你也可以随时主动查询：

• 用 document.querySelector('input[name="gender"]:checked') 获取已选中的 DOM 元素，再读 .value
• 若没选中任何项，上述选择器返回 null，需做空值判断
• 也可遍历同名 radio 集合：document.querySelectorAll('input[name="gender"]')，然后找 checked === true 的那个

注意点与常见坑

• click 事件会在每次点击都触发（包括重复点击已选项），而 change 只在值实际变化时触发，更符合“切换”语义
• 初始化时如果已有默认选中项，change 不会自动触发，需单独读一次初始值
• 不要只监听单个 <input> 元素——容易漏掉同组其他项；监听父容器或用委托更稳妥
• 表单提交前建议再校验一次，防止 JS 未执行或用户禁用脚本