Checkbox issue in Ionic 3

Question

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

Change (click) to (change)

joka00
– joka00

2019-03-15 10:21:00 +00:00
Commented Mar 15, 2019 at 10:21 — joka00
– joka00, Commented Mar 15, 2019 at 10:21
it's not working @JosefKatič

Kevin Jose
– Kevin Jose

2019-03-15 10:38:45 +00:00
Commented Mar 15, 2019 at 10:38 — Kevin Jose
– Kevin Jose, Commented Mar 15, 2019 at 10:38

Kevin Jose · Accepted Answer · 2019-03-18 06:25:42Z

1

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.

answered Mar 18, 2019 at 6:25

Kevin Jose

8728 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sivaramakrishnan · Accepted Answer · 2019-03-15 11:09:12Z

0

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

answered Mar 15, 2019 at 11:09

Sivaramakrishnan

7391 gold badge4 silver badges11 bronze badges

1 Comment

Kevin Jose Over a year ago

Thank you. It works.Changed if condition into (if selectedValue = true), but it doesn't entering in the else box . Have a look on my code.

Collectives™ on Stack Overflow

Checkbox issue in Ionic 3

Html file

Ts File

2 Answers 2

Home.Html

Home.ts

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Html file

Ts File

2 Answers 2

Home.Html

Home.ts

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related