Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get checked values Ionic 3

I'd like to get all checked values from a checkboox list in ionic3 on click. This is the code :

<ion-content padding>
<ion-list>
  <ion-item *ngFor="let item of items; let i= index">
    <ion-label>{{item.name}}</ion-label>
    <ion-checkbox [(ngModel)]="checkedItems[i]"   (ionChange)="do_sth()"></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>

And the javascript :

do_sth() { 
                    console.log(this.checkedItems); 

                    }
like image 751
de albuquerque frank Avatar asked May 16 '26 22:05

de albuquerque frank


1 Answers

here i wrote ionic code for get all checked value this will help you to get all checked value from checkbox list, you don't need to add change event in ion-checkbox, in your items array add one more properties isChecked for chek or uncheck,here check example
I have added button to get value

<ion-content padding>
<ion-list>
 <ion-item *ngFor="let item of items; let i= index">
   <ion-label>{{item.name}}</ion-label>
   <ion-checkbox [(ngModel)]="item.isChecked"></ion-checkbox>
 </ion-item>
</ion-list>
  <button (click)="getCheckedvalue()">getCheck Value</button>
</ion-content>

//javascript code
items: any;
checkedItems:any;
 constructor(public navCtrl: NavController) {
  this.items = [
   { name: 'item1', isChecked: true },
   { name: 'item2', isChecked: false },
   { name: 'item3', isChecked: false }
 ];
}
getCheckedvalue () {
 this.checkedItems =  this.items.filter(value => {
   return value.isChecked;
 });
 console.log(this.checkedItems);
}

result in this.checkedItems

like image 85
kushal shah Avatar answered May 19 '26 12:05

kushal shah