Determining if checkbox is checked

Ionic Framework ionic-v3
1

Hi there

How can I determine if a ion-checkbox is checked?

<ion-item *ngFor="let a of q.Answers">
   <ion-label>{{a.AnswerDescription}}</ion-label>
   <ion-checkbox (click)="addValue($event)" [(ngModel)]="a.checked"></ion-checkbox>
</ion-item>

the following return undefined

 addValue(e): void {
     var isChecked = e.currentTarget.checked;
     console.log(isChecked);//undefined

 }
2 Likes
2

hi ariang, you should have the checked value in a.checked of your function. In addValue you q.Answers should have the .checked changed to the new value.

I tried this and it is working :

  <ion-item>
    <ion-label>AnswerDescription</ion-label>
    <ion-checkbox (click)="addValue($event)" [(ngModel)]="checked"></ion-checkbox>
   </ion-item>

 checked : boolean = true;
  addValue(e): void {
    var isChecked = e.currentTarget.checked;
    console.log(e.currentTarget);//undefined
    console.log(this.checked);//it is working !!!

  }
3 Likes
3

Cool, thank you. My mind wasn’t working yesterday and eventually I managed to see the wood from the trees.

Silly me

4

its working perfectly

5

This help me a lot. I have made some changes, this don’t get the real checkbox state, but change the boolean variable and simulate it.

Using Ionic v4

HTML

<ion-item>
    <ion-label>AnswerDescription</ion-label>
    <ion-checkbox (click)="addValue($event)"></ion-checkbox>
</ion-item>

TS

checked : boolean = false;
	
addValue(): void {
  	this.checked = !this.checked;
  	console.log("checked: " + this.checked);//it is working !!!
	
}

Edit - April, 22, 2019

The method bellow get the real value (checked or not) from checkbox and display.

TS

addValue(e): void {
  	console.log(e.currentTarget.checked);	
}

HTML

<ion-item>
    	<ion-label>AnswerDescription</ion-label>
    	<ion-checkbox (ionChange)="addValue($event)"></ion-checkbox>
 </ion-item>
3 Likes
6

Just use an NgModel.

<ion-checkbox checked="false" [(ngModel)]="yourVariable.checked"></ion-checkbox>