Search code examples
angularionic-frameworkionic3ion-checkbox

How to get ion-checkbox multiple select value in Ionic 3


    <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>

How to get all checkbox value like multi select when click on Done button


Solution

  • <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>
    

    in 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);
    }