如何通过原生JS获取Ionic单选按钮的选中值？

问题根源 #

你之前的代码没生效主要有两个原因：

• DOMContentLoaded 触发时机早于Ionic组件完成初始化，导致无法正确绑定事件
• 监听单个<ion-radio>的click事件不符合Ionic组件的事件逻辑，单选按钮的选中状态由<ion-radio-group>统一管理

最简可行实现方案 #

优化后的HTML结构（符合Ionic规范，布局更美观）

<ion-item>
  <ion-radio-group id="genderradioGroup" value="male">
    <ion-list-header>
      What Is Your Gender?
    </ion-list-header>
    <ion-item>
      <ion-radio slot="start" value="male"></ion-radio>
      <ion-label>Male</ion-label>
    </ion-item>
    <ion-item>
      <ion-radio slot="start" value="female"></ion-radio>
      <ion-label>Female</ion-label>
    </ion-item>
    <ion-item>
      <ion-radio slot="start" value="pref-not-to-say"></ion-radio>
      <ion-label>Prefer Not To Say</ion-label>
    </ion-item>
  </ion-radio-group>
</ion-item>

正确的事件监听代码

直接监听<ion-radio-group>的ionChange事件，这是Ionic官方推荐的方式：

document.addEventListener('DOMContentLoaded', function() {
  const genderGroup = document.getElementById('genderradioGroup');
  
  genderGroup.addEventListener('ionChange', function(event) {
    const selectedGender = event.detail.value;
    console.log("Gender:", selectedGender);
    // 这里可以处理选中后的逻辑
  });
});

方案优势 #

1. 贴合Ionic组件设计：单选组状态由ion-radio-group统一维护，ionChange事件会在选中状态真正变化时触发，比监听单个按钮的click更可靠
2. 代码简洁高效：无需遍历所有单选按钮，只需给组绑定一次事件
3. 取值准确直接：通过event.detail.value直接获取当前选中值，无需手动读取DOM属性

内容的提问来源于stack exchange，提问作者John Rogers