How to get the values of multiple checkboxes in typescript file using angular 6?

Question

I have 8 to 10 checkboxes in my html. I need to send the checked checkboxes values to my typescript file.

<div>
    <input type="checkbox" value="one" id="one" name="num">
    <input type="checkbox" value="two" id="two" name="num">
    <input type="checkbox" value="three" id="three" name="num">
    <input type="checkbox" value="four" id="four" name="num">
</div>

How do I get all the selected checkboxes values in my ts file? Can somebody help me with this?

Are you using Reactive forms or Template driven forms, in your code nothing is there!!! — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Aug 10, 2018 at 3:16

Augustin R · Accepted Answer · 2018-08-10 07:32:45Z

1

You could use an array containing informations on your checkboxes, ngFor loop and ngModel:

checkboxes = [
    {
      value: 'one',
      selected: false
    },
    {
      value: 'two',
      selected: false
    },
    {
      value: 'three',
      selected: false
    },
    {
      value: 'four',
      selected: false
    }
  ]

Your html :

<div>
    <input *ngFor="let ch of checkboxes" [(ngModel)]="ch.selected" type="checkbox" value={{ch.value}} id={{ch.value}}  name="num">
</div>

<button (click)="getSelected()">Print selected checkboxes</button>

And the getSelected() function:

public getSelected() {
    let result = this.checkboxes.filter((ch) => { return ch.selected })
                     .map((ch) => { return ch.value });
    console.log(result);
}

answered Aug 10, 2018 at 7:32

Augustin R

7,8593 gold badges30 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

How to get the values of multiple checkboxes in typescript file using angular 6?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related