如何在 Ionic 3 中获取 ion-checkbox 多选值答案

【问题标题】：How to get ion-checkbox multiple select value in Ionic 3如何在 Ionic 3 中获取 ion-checkbox 多选值
【发布时间】：2018-10-28 04:46:30
【问题描述】：

    <div *ngIf="testList.length > 0">
  <ion-item *ngFor="let member of testList">
    <ion-label>{{member?.testName || 'N/A'}}</ion-label>
    <ion-checkbox color="dark" [(ngModel)]="member.checked"></ion-checkbox>
  </ion-item>
</div>

[{testID: 1, testName: " test1", testAmount: "500", testDescription: ""},
{testID: 2, testName: " test2", testAmount: "500", testDescription: ""},
{testID: 3, testName: "dgdfgd", testAmount: "150", testDescription: ""},
{testID: 4, testName: "UricAcid", testAmount: "200", testDescription: ""}]

<button (click)="gettstdata()">Done</button>

单击完成按钮时如何获取所有复选框值，例如多选

【问题讨论】：

标签： angular ionic-framework ionic3 ion-checkbox

【解决方案1】：

<div *ngIf="testList.length > 0">
  <ion-item *ngFor="let member of testList">
    <ion-label>{{member?.testName || 'N/A'}}</ion-label>
    <ion-checkbox color="dark" (click)="selectMember(member)" [(ngModel)]="member.checked"></ion-checkbox>
  </ion-item>
</div>
<button ion-button (click)="checkAll()">Done</button>

在ts中：

  testList: any = [
       {testID: 1, testName: " test1", checked: false},
       {testID: 2, testName: " test2", checked: false},
       {testID: 3, testName: "dgdfgd", checked: false},
       {testID: 4, testName: "UricAcid", checked: false}
    ]

selectedArray :any = [];

checkAll(){
  for(let i =0; i <= this.testList.length; i++) {
    this.testList[i].checked = true;
  }
 console.log(this.testList);
}

selectMember(data){
 if (data.checked == true) {
    this.selectedArray.push(data);
  } else {
   let newArray = this.selectedArray.filter(function(el) {
     return el.testID !== data.testID;
  });
   this.selectedArray = newArray;
 }
 console.log(this.selectedArray);
}

【讨论】：

但 checkAll() 不起作用，但我在 selectMember(data) ` checkAll(){ console.log(this.selectedArray); } `
删除不起作用。我的意思是如果它检查，添加到数组。但如果我取消选中某些选项，它不会从数组中删除。你能帮帮我吗？

【解决方案2】：

有几种方法可以实现这一点。

-您可以使用（更改），我为您写了一些额外的方法，当您使用复选框时，您将需要这些方法来处理常见的事情

 <div *ngIf="testList.length > 0">
  <ion-item *ngFor="let member of testList">
    <ion-label>{{member?.testName || 'N/A'}}</ion-label>
    <ion-checkbox color="dark" (change)="addCheckbox($event,member.testName)"></ion-checkbox>
  </ion-item>
</div>

<button (click)='getCheckedBoxes()'>Done</button>

在您的 .ts 文件中

checked = [];
//Adds the checkedbox to the array and check if you unchecked it
addCheckbox(event, checkbox : String) { 
    if ( event.target.checked ) {
      this.checked.push(checkbox);
    } else {
      let index = this.removeCheckedFromArray(checkbox);
      this.checked.splice(index,1);
    }
  }

  //Removes checkbox from array when you uncheck it
  removeCheckedFromArray(checkbox : String) {
    return this.checked.findIndex((category)=>{
      return category === checkbox;
    })
  }

  //Empties array with checkedboxes
  emptyCheckedArray() {
    this.checked = [];
  }

 getCheckedBoxes() {
   //Do whatever
   console.log(this.checked);
 }

【讨论】：

像这样变空[]
使用 (ionChange) 而不是 (change) 事件。

【解决方案3】：

@Patricio Vargas 的回答有效，但您需要使用 (ionChange) 而不是 (change)

还将 if 语句条件从 (event.target.checked) 更改为 (event.checked)

<div *ngIf="testList.length > 0">
  <ion-item *ngFor="let member of testList">
    <ion-label>{{member?.testName || 'N/A'}}</ion-label>
    <ion-checkbox color="dark" (ionChange)="addCheckbox($event,member.testName)"></ion-checkbox>
  </ion-item>
</div>

<button (click)='getCheckedBoxes()'>Done</button>

在您的 .ts 文件中

checked = [];
//Adds the checkedbox to the array and check if you unchecked it
addCheckbox(event, checkbox : String) { 
    if ( event.checked ) {
      this.checked.push(checkbox);
    } else {
      let index = this.removeCheckedFromArray(checkbox);
      this.checked.splice(index,1);
    }
  }

  //Removes checkbox from array when you uncheck it
  removeCheckedFromArray(checkbox : String) {
    return this.checked.findIndex((category)=>{
      return category === checkbox;
    })
  }

  //Empties array with checkedboxes
  emptyCheckedArray() {
    this.checked = [];
  }

 getCheckedBoxes() {
   //Do whatever
   console.log(this.checked);
 }

【讨论】：