CODEWITHSUNDEEP
angularionic-frameworkionic3
Kevin Jose
Kevin Jose

Reputation: 876

Checkbox issue in Ionic 3

have an ionic template with a checkbox .The condition is that once the value checked , the value should pass into the user_filter array(user_filter array already declared and working well). While i clicked on the select box the console1 value displayed but the console 2 not , means the data doesn’t entered in the array .Does any one know the reasons! …

Html file

<ion-item>
                    <ion-label>Non A/C</ion-label>
                    <ion-checkbox (click)="choose_type('type','Non A/C',$event)"></ion-checkbox>

                </ion-item>

Ts File

choose_type(type: string, value: any, event: { target: { checked: boolean; }; }) {

 console.log('Inside choose type function'); //console1
    let index;
     console.log('Boolean value',event.target.checked);
    if (event.target.checked === true) {
 console.log('Inside ture value'); //console2
       console.log('Value checked true');
        this.user_filter[type].push(value);

    }
     else
      {
        index = this.user_filter[type].indexOf(value);
        this.user_filter[type].splice(index, 1);
    }
    console.log('User filter array',this.user_filter);
}

Upvotes: 1

Views: 497

Answers (2)

Kevin Jose
Kevin Jose

Reputation: 876

Thank you guys for your answers. Finally i fixed it well , let me post the edited code for future reference.

Home.Html

 <ion-item>
                        <ion-label>Non A/C</ion-label>
                        <ion-checkbox (ionChange)="choose_type('type','Non A/C',$event)"></ion-checkbox>

                    </ion-item>

Home.ts

choose_type(type: string, value: any, event: any) {
    let index;

    if (event.checked === true) {
       console.log('Pushed into array');
        this.user_filter[type].push(value);
       }
 else
      {

        index = this.user_filter[type].indexOf(value);
        this.user_filter[type].splice(index, 1);
    }
    console.log('User filter array',this.user_filter);
}

Tips :Instead of (event.target.checked) use (event.checked) for getting the value.

Upvotes: 1

Sivaramakrishnan
Sivaramakrishnan

Reputation: 739

You need not use the change or click event for ion-checkbox instead use the ionChange event that is given for ionic checkbox then only you will get the selected values.

You can get the selected value from $event.value. click event works but you will not get the value selected in the checkbox. You get undefined when you use click event that's why the console is not printed.

HTML

<ion-item>
    <ion-label>Non A/C</ion-label>
    <ion-checkbox (ionChange)="choose_type('type','Non A/C',$event.value)"></ion-checkbox>
</ion-item>

TS

choose_type(type: string, value: any, selectedValue) {
console.log(selectedValue); // Will be true or false
// Add your code here
}

Refer ionic documentation ion-checkbox

Upvotes: 0

Related Questions