验证 Ionic 中是否选中了 ion-checkbox

Question

我有一个复选框列表，我需要确定何时至少选中其中一项以启用按钮。

到目前为止，我已经设法做到了，但它不适用于 event.target.checked，只是没有任何反应，我也只是尝试了 event.checked，但什么也没有。

<ion-list>
   <ion-item *ngFor="let option of question.options">
      <ion-label>{{option}}</ion-label>
      <ion-checkbox color="secondary" value="option" (click)="isChecked($event)" name="option"></ion-checkbox>
   </ion-item>
</ion-list>

file.ts:

isChecked(event) {
  if ( event.target.checked ) {
    console.log("Checked!");
    this.btnDisabled = false;
 }
}

离子版本：3.9.5

Angular 5

Answer 1

使用ionChange代替click和event.checked 而不是 event.target.checked.

<ion-checkbox color="secondary" value="option" (ionChange)="isChecked($event)" name="option"></ion-checkbox>

isChecked(event) {
  if ( event.checked ) {
    this.btnDisabled = false;
 }
}

Answer 2

这样试试：

Working Demo

模板：

<ion-list>
   <ion-item *ngFor="let option of question.options">
      <ion-label>{{option}}</ion-label>
      <ion-checkbox color="secondary" value="option" (click)="onChange(option)" name="option"></ion-checkbox>
   </ion-item>
</ion-list>

<button [disabled]="checkedItems.length <1 ">Save </button>

TS:

 checkedItems = []


 onChange(item) {
    if(this.checkedItems.includes(item)) {
      this.checkedItems = this.checkedItems.filter((value)=>value!=item);

    } else {
      this.checkedItems.push(item)
    }
  }

Answer 3

我想在弄乱了一段时间后添加一个答案。我在@ionic/angular@6.0.3.

在某些时候，$event 的输出似乎已更改为包含一个“细节”属性，这在其他关于使用 ion-checkbox 的答案中没有提到。

component.html

<ion-item>
  <ion-checkbox name="agree" value="agree" (ionChange)="onCheck($event)">
  </ion-checkbox>
  <ion-text>I'm agreeing to something</ion-text>
</ion-item>

component.ts

onCheck(event: any) {
  if(event.detail.checked) {
    console.log(`It's checked`, event);
  } else if (!event.detail.checked) {
    console.log(`It's unchecked`, event);
  }
}

验证 Ionic 中是否选中了 ion-checkbox

Verify that ion-checkbox is checked in Ionic

typescript

ionic-framework

ionic3

angular