ionic 单选框操作

Ionic 单选框（Radio）完整操作指南（Ionic 7+ / Angular）

Ionic 使用 <ion-radio> 和 <ion-radio-group> 实现单选功能，完美支持 iOS、Android、Web 三端统一美观样式。

1. 基本单选列表（最常用）

<!-- template -->
<ion-list>
  <ion-radio-group [(ngModel)]="gender" (ionChange)="genderChanged($event)">

    <ion-item>
      <ion-label>男</ion-label>
      <ion-radio slot="start" value="male"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>女</ion-label>
      <ion-radio slot="start" value="female"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>保密</ion-label>
      <ion-radio slot="start" value="secret"></ion-radio>
    </ion-item>

  </ion-radio-group>
</ion-list>

<!-- 显示当前选中 -->
<ion-item>
  <ion-label>你选择了：{{ gender || '未选择' }}</ion-label>
</ion-item>

// component.ts
gender: string = 'male'; // 默认选中男

genderChanged(e: any) {
  console.log('单选值改变：', e.detail.value);
  // e.detail.value 就是你选中的 value
}

2. 使用数组动态生成单选（推荐）

<ion-list>
  <ion-radio-group [(ngModel)]="selectedFruit">
    <ion-item *ngFor="let fruit of fruits">
      <ion-label>{{ fruit.name }}</ion-label>
      <ion-radio slot="start" [value]="fruit.id"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

fruits = [
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' },
  { id: 4, name: '西瓜' }
];

selectedFruit: number = 2; // 默认选中香蕉

3. 表单中使用（Reactive Forms）

form = this.fb.group({
  payment: ['alipay', Validators.required]  // 默认选中支付宝
});

<form [formGroup]="form">
  <ion-radio-group formControlName="payment">

    <ion-item>
      <ion-label>支付宝</ion-label>
      <ion-radio value="alipay"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>微信支付</ion-label>
      <ion-radio value="wechat"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>银行卡</ion-label>
      <ion-radio value="bank"></ion-radio>
    </ion-item>

  </ion-radio-group>
</form>

4. 不同样式和颜色

<ion-radio color="primary"></ion-radio>    <!-- 蓝色 -->
<ion-radio color="success"></ion-radio>    <!-- 绿色 -->
<ion-radio color="warning"></ion-radio>    <!-- 黄色 -->
<ion-radio color="danger"></ion-radio>     <!-- 红色 -->
<ion-radio color="dark"></ion-radio>

5. 禁用单选框

<ion-radio disabled="true"></ion-radio>
<ion-radio [disabled]="true" value="vip"></ion-radio>

<!-- 整组禁用 -->
<ion-radio-group [disabled]="isDisabled">
  ...
</ion-radio-group>

6. 弹出式单选（Alert 方式）—— 常用于筛选、设置

async presentRadioAlert() {
  const alert = await this.alertController.create({
    header: '选择城市',
    inputs: [
      { type: 'radio', label: '北京', value: 'beijing', checked: true },
      { type: 'radio', label: '上海', value: 'shanghai' },
      { type: 'radio', label: '广州', value: 'guangzhou' },
      { type: 'radio', label: '深圳', value: 'shenzhen' }
    ],
    buttons: [
      { text: '取消', role: 'cancel' },
      { text: '确定', handler: (data) => {
          this.selectedCity = data;
          console.log('用户选择了：', data);
        }
      }
    ]
  });
  await alert.present();
}

7. 常用属性速查表

属性	说明	示例
value	当前单选框的值（必须唯一）	value="male"
checked	是否默认选中	checked
disabled	禁用	disabled
color	颜色	color="success"
slot="start"	单选圆点在左边（推荐）
slot="end"	单选圆点在右边（默认）
mode="md"	强制使用 Android 风格

8. 关键点总结

• 所有 <ion-radio> 必须放在同一个 <ion-radio-group> 里才能实现单选
• 双向绑定写在 <ion-radio-group> 上，而不是单个 radio
• (ionChange) 事件也在 group 上监听
• 使用 [value] 而不是 value="{{}}"（Angular 推荐）

这样就能在 Ionic 中完美使用单选框了！
需要 Vue 或 React 版本也可以告诉我～