Ionic 复选框

17 Mar 2025 | 阅读 2 分钟

复选框是一种持有布尔值的input组件。它类似于 HTML 复选框输入。与 Ionic 其他组件一样，Ionic 复选框在每个平台上都有不同的样式。您可以使用带有<ion-checkbox>元素的checked属性来设置默认值，并使用disabled属性来阻止用户更改值。

示例

以下示例显示了在 Ionic 应用程序中使用的不同类型的复选框。

<ion-header>
  <ion-toolbar>
    <ion-title>
      CheckBox
    </ion-title>
  </ion-toolbar>
</ion-header>
     
<ion-content class="padding" color="light">
  <!-- Default Checkbox -->
  <div>
    <ion-checkbox></ion-checkbox>
    <ion-label> Default</ion-label>
  </div>
  <!-- Disabled Checkbox -->
  <div>
    <ion-checkbox disabled="true"></ion-checkbox>
    <ion-label> Disabled</ion-label>
  </div>
  <!-- Checked Checkbox -->
  <div>
    <ion-checkbox checked="true"></ion-checkbox>
    <ion-label> Checked</ion-label>
  </div>
</ion-content>

输出

当您在终端中执行该应用程序时，它将给出以下输出。

样式复选框

如果要设置复选框的样式，请使用带有复选框前缀的 Ionic color 属性。以下示例说明了 Ionic color 属性与复选框组件的用法。

示例

<ion-header>
  <ion-toolbar>
    <ion-title>
      CheckBox
    </ion-title>
  </ion-toolbar>
</ion-header>
     
<ion-content class="padding" color="light">
  <!-- Checkbox Colors -->
  <ul><li>
    <ion-checkbox color="primary" checked="false"></ion-checkbox>
  </li></ul>
  <ul><li>
    <ion-checkbox color="secondary" checked="true"></ion-checkbox>
  </li></ul>
  <ul><li>
    <ion-checkbox color="light" checked="true"></ion-checkbox>
  </li></ul>
  <ul><li>
    <ion-checkbox color="dark" checked="false"></ion-checkbox>
  </li></ul>
  <ul><li>
    <ion-checkbox color="danger" checked="true"></ion-checkbox>
  </li></ul>
</ion-content>

输出

列表中的复选框

您也可以将复选框与列表一起使用。以下示例说明了如何将复选框与列表一起使用。

示例

Home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      CheckBox
    </ion-title>
  </ion-toolbar>
</ion-header>
     
<ion-content class="padding" color="light">
 <!-- Checkboxes in a List -->
 <ion-list>
    <ion-item *ngFor="let entry of form">
      <ion-label>{{entry.val}}</ion-label>
      <ion-checkbox slot="start" [(ngModel)]="entry.isChecked"></ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>

Home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public form = [ 
    { val: 'Pok?mon Yellow' , isChecked: false},
    { val: 'Super Metroid' , isChecked: true},
    { val: 'Mega Man X' , isChecked: false},
    { val: 'Spider Man' , isChecked: true}
  ];
}

输出

下一主题Ionic Chip

Ionic 复选框

示例

样式复选框

列表中的复选框

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Ionic 教程

Ionic 组件

导航 & 路由

高级主题

Ionic 差异

面试题

Ionic 复选框

示例

样式复选框

列表中的复选框

相关帖子

Ionic 无限滚动

Ionic Action Sheets (操作表)

Ionic 选择器

Ionic 加载

Ionic 标签页

Ionic 分段控件

Ionic 模态框

Ionic 切换开关

Ionic 芯片

Ionic Popover (弹出框)

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器