How to get the checkbox Value?

Ionic Framework ionic-v3
1

I’m not able to get the checkbox value, I tried this way:

page.html

     <ion-item>
      <ion-label>Approved</ion-label>
      <ion-checkbox secondary value="2" [ngFormControl]="tstatus" checked="true"></ion-checkbox>
    </ion-item>
  </ion-list>

page.ts

  onSubmit(value: string): void {
	  console.log('Submitted value: ', value.tstatus);

}

but it returns a boolean value i.e true or false.

How to get the correct checkbox value?

1 Like
2

0_o Can you explain me how you can turn off to 2? Or Turn on to 2? So checkbox has boolean type.

3

I think when you have a value if checked you can check that value.

4

Ah, I understood… Um. Maybe it’s bug. However we can overwrite it. Samething like:

tstatus === true && tstatus = 2

1 Like
6

I have given the label as “approved” and the value as “2” on the console if it’s checked it shows as:

Approved submitted value: true

How to get the value here?

7

I have tested this and cant get the value from the checkbox. Only true or false.

8

Is there a way to get the checkbox value?

9

Is the above approach correct to get the checkbox value? Are there any other way to get the checkbox value?

10

For example, you could use ngModel, hm… however I am not sure that it will return the value instead of true/false )

11

How to do it using ngModel ?

12

I tried with ngModel too but also was set to true/false

<ion-checkbox [(ngModel)]="tstatus"></ion-checkbox>

1 Like
13

I have same issue getting true/false value instead of values…

I have dynamic checkbox.

<ion-checkbox formControlName="{{group.name}}" value="{{filter.id}}" [(ngModel)]="filter.id"></ion-checkbox>

14

Faced a similiar problem with multiple checkboxes over 10k. I used a simple click handler

(click) = "getValue(value)" inside the checkbox. The function did the rest.

3 Likes
15

I tried your approach , It works fine when the user clicks on the checkbox for the first time but if he re clicks the same checkbox item it returns true or false.Have you found any workaround for this?

16

I just keep track of the values in an internal array, push or splice them on click.

by adding setValue to the control. It will also emit new values to the valueChanges Observable of the formGroup

Component:
selectedQuestions:string = ;

 clickQuestionSelectBox(questionKey){
     const foundAt = this.selectedQuestions.indexOf(questionKey);
     if (foundAt >= 0) {
        this.selectedQuestions.splice(foundAt, 1);
     } else {
        this.selectedQuestions.push(questionKey);
    }
    this.addNewQuestionSetForm.controls['selectedQuestionKeys'].setValue(this.selectedQuestions);
}

Template:
> <ion-row *ngFor=“let question of filteredQuestions”>

        <ion-col width-50>
          <ion-checkbox (click)="clickQuestionSelectBox(question.$key)"></ion-checkbox>
       </ion-col>
       <ion-col width-50>
            {{question.text}}
       </ion-col>
</ion-row>
17

Cycling through the entire array on every click seems wasteful. How about storing it as a map instead with the question key as the key and a boolean as the value? Then you can use for...of to iterate through the map only at submit time if you need to flatten it to an array?

1 Like
18

true, working on a fast poc now. I will change it if I have time. Thanks for the suggestion !

19

Try the approach outlined here: https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms

The scotch.io example is with Angular 1, but the same principles might apply.

20

I don’t know if you solved your problem, which is also mine, so I to solved this

21

can i see your service code? how do you save multiple items?