ionic 复选框

Ionic 复选框（Checkbox）完整使用指南（Ionic 7+ / Angular）

Ionic 提供了美观且支持 iOS、Android、Web 三端一致的复选框组件：ion-checkbox。

1. 基本单选框（单个）

<ion-item>
  <ion-label>同意用户协议</ion-label>
  <ion-checkbox slot="start" [(ngModel)]="isAgreed"></ion-checkbox>
</ion-item>

<!-- 或者更简洁写法 -->
<ion-item>
  <ion-checkbox slot="start"></ion-checkbox>
  <ion-label>记住登录状态</ion-label>
</ion-item>

2. 多选列表（最常见场景）

<!-- template: list.page.html -->
<ion-list>
  <ion-list-header>
    <ion-label>选择你喜欢的编程语言</ion-label>
  </ion-list-header>

  <ion-item *ngFor="let lang of languages">
    <ion-label>{{ lang.name }}</ion-label>
    <ion-checkbox 
      slot="end" 
      [(ngModel)]="lang.checked"
      (ionChange)="onChange(lang, $event)">
    </ion-checkbox>
  </ion-item>
</ion-list>

<!-- 全选/反选 -->
<ion-item>
  <ion-label>全选</ion-label>
  <ion-checkbox 
    [checked]="isAllChecked()" 
    (click)="toggleAll()">
  </ion-checkbox>
</ion-item>

// list.page.ts
export class ListPage {
  languages = [
    { name: 'JavaScript', checked: false },
    { name: 'TypeScript', checked: true },
    { name: 'Java', checked: false },
    { name: 'Python', checked: true },
    { name: 'Go', checked: false },
  ];

  onChange(item: any, event: any) {
    console.log('选中状态：', item.name, event.detail.checked);
  }

  // 全选/取消全选
  toggleAll() {
    const allChecked = this.isAllChecked();
    this.languages.forEach(lang => lang.checked = !allChecked);
  }

  isAllChecked(): boolean {
    return this.languages.every(lang => lang.checked);
  }

  // 获取所有选中的值
  getSelected() {
    return this.languages
      .filter(lang => lang.checked)
      .map(lang => lang.name);
  }
}

3. 不同颜色和样式

<ion-checkbox color="primary"></ion-checkbox>   <!-- 默认蓝 -->
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="success"></ion-checkbox>
<ion-checkbox color="warning"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>
<ion-checkbox color="medium"></ion-checkbox>

4. 禁用状态

<ion-checkbox disabled="true" [checked]="true"></ion-checkbox>
<ion-checkbox [disabled]="isDisabled"></ion-checkbox>

5. 表单中使用（Reactive Forms）

// 在 component.ts
form = this.fb.group({
  skills: this.fb.array([], Validators.required)
});

onCheckboxChange(e: any, skill: string) {
  const skills: FormArray = this.form.get('skills') as FormArray;

  if (e.detail.checked) {
    skills.push(new FormControl(skill));
  } else {
    const index = skills.controls.findIndex(x => x.value === skill);
    skills.removeAt(index);
  }
}

<form [formGroup]="form">
  <ion-item *ngFor="let skill of skillList">
    <ion-label>{{skill}}</ion-label>
    <ion-checkbox (ionChange)="onCheckboxChange($event, skill)">
    </ion-checkbox>
  </ion-item>
</form>

6. 常用属性一览表

属性	类型	说明	示例
checked	boolean	是否选中	[checked]="true"
disabled	boolean	是否禁用	disabled
color	string	颜色主题	color="success"
mode	‘ios’	‘md’	强制使用某种平台样式（一般不用）
value	any	绑定值（常用于表单）	value="js"
indeterminate	boolean	半选状态（常用于树形全选）	[indeterminate]="true"

7. 事件

<ion-checkbox 
  (ionChange)="checkboxChanged($event)"
  (ionBlur)="onBlur()">
</ion-checkbox>

小技巧

• 想让复选框在左侧：用 slot="start"
• 想让复选框在右侧（默认）：用 slot="end" 或不写 slot
• 想做“树形多选”：结合 indeterminate="true" 实现父子联动

这样就能在 Ionic 项目中优雅地使用复选框了！有需要 Vue 或 React 版本的也可以告诉我。