Chic-a-Chic-a-CheckBox

Checkboxes in Ionic2

Posted by Andrew Graham-Yooll on October 30, 2016

Im going to try to keep my future posts short and simple.

KISS

Ahhh…. the beautiful checkbox in your form. You just love clicking it don’t you?

Well, lets put one in!

Template

<ion-item>
	<ion-label>Check this out!</ion-label>
  	<ion-checkbox (click)="onCheckBox(1)"></ion-checkbox>
</ion-item>

Component

data = {1:'undefined'}

onCheckBox(loc){
    //store the checkBox answers however you would like.
    // I use FormBuilder and then insert the checkBox Answers into my form on submittal
    let ans = this.data[loc]
    if(ans == 'undefined' || ans == 'false'){
      	this.data[loc] = 'true' 
      	console.log('this.data true***', this.data)
    }  
    else{
	    this.data[loc] = 'false'
	    console.log('this.data false***', this.data) 
		}
 	}
}

Working Plunker