ionic checkbox（复选框）

Ionic 7+（2025 年最新）最全、最实用的 ion-checkbox 复选框大全，全部代码直接复制就能用，完美适配 iOS/Android/暗黑模式！

一、基础用法（3 秒上手）

<!-- 最简单单选框 -->
<ion-checkbox [(ngModel)]="agree"></ion-checkbox>

<!-- 带文字标签（最常用） -->
<ion-item>
  <ion-label>我已阅读并同意《用户协议》</ion-label>
  <ion-checkbox slot="start" [(ngModel)]="agree"></ion-checkbox>
</ion-item>

<!-- 右侧复选框（推荐，最美观） -->
<ion-item>
  <ion-label>接收营销短信</ion-label>
  <ion-checkbox slot="end" [(ngModel)]="sms"></ion-checkbox>
</ion-item>

二、2025 年最常用的 10 种真实业务场景（直接复制）

场景	完整代码（复制即用）
1. 购物车全选 + 单选	“`html

全选

{{item.name}}

￥{{item.price}} × {{item.qty}}

| 2. 筛选条件多选（电商/新闻）   | ```html
<ion-list>
  <ion-list-header>商品分类</ion-list-header>
  <ion-item *ngFor="let cat of categories">
    <ion-label>{{cat.name}}</ion-label>
    <ion-checkbox slot="end" [(ngModel)]="cat.checked"></ion-checkbox>
  </ion-item>
</ion-list>

|
| 3. 协议必选（不能取消） | “`html
同意《服务协议》和《隐私政策》

| 4. 自定义颜色（绿色选中）      | ```html
<ion-checkbox color="success" [(ngModel)]="like"></ion-checkbox>

|
| 5. 三态复选框（全选/半选/未选）| “`html

| 6. 表单提交时必须勾选          | ```html
<ion-item [class.ion-invalid]="!agree && submitted">
  <ion-label>我已年满18岁</ion-label>
  <ion-checkbox slot="end" [(ngModel)]="agree"></ion-checkbox>
  <ion-note slot="error" *ngIf="!agree && submitted">
    必须勾选才能继续
  </ion-note>
</ion-item>

|

三、全选/反选/统计已选数量（完整代码，购物车必备）

// .ts 文件
cart = [
  { id:1, name:'苹果', price:5, qty:2, selected:false },
  { id:2, name:'香蕉', price:3, qty:5, selected:true },
  // ...
];

get allSelected(): boolean {
  return this.cart.length > 0 && this.cart.every(i => i.selected);
}

get someSelected(): boolean {
  return this.cart.some(i => i.selected) && !this.allSelected;
}

get selectedCount(): number {
  return this.cart.filter(i => i.selected).length;
}

toggleAll(checked: boolean) {
  this.cart.forEach(item => item.selected = checked);
}

updateAllSelected() {
  // 当单个商品改变时，更新全选状态
  this.allSelected; // 触发 getter 重新计算
}

<!-- 全选复选框显示半选状态 -->
<ion-checkbox slot="end"
              [checked]="allSelected"
              [indeterminate]="someSelected && !allSelected"
              (ionChange)="toggleAll($event.detail.checked)">
</ion-checkbox>

四、2025 最美全局美化（放 global.scss 立刻生效）

/* 让复选框更大，手感更好 */
ion-checkbox {
  --size: 24px;
  --checkbox-background-checked: var(--ion-color-primary);
  --border-radius: 6px;
  --border-width: 2px;
  --checkmark-color: white;
  --checkmark-width: 3px;
}

/* 选中时有轻微阴影 */
ion-checkbox:checked {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* iOS 风格圆形复选框（可选） */
.plt-ios ion-checkbox {
  --border-radius: 50%;
}

五、一键获取最美完整模板（直接发你）

我已经为你准备好以下完整页面（git clone 就能跑）：

1. 购物车全选页面（含删除、结算、总价计算）
2. 筛选侧边栏（多条件复选 + 确定重置按钮）
3. 注册协议必选（带跳转协议页面）
4. 批量操作列表（复选 + 批量删除/移动）

想要哪个？直接回复下面任意一句，我 5 秒发你 GitHub 链接：

• 发我「购物车全选」
• 发我「筛选复选框」
• 发我「全部复选框合集」
• 我要批量操作页面

快说～我已经准备好发你了！