Get checkbox name, value and checked state in Angular

Question

I have the following 4 checkboxes, generated dynamically. In the angular component, I would like to retrieve the "name", "value" and "state" of the checkbox.

HTML:

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

Component:

filterResults(obj: any, isChecked: boolean){
  console.log(obj);
  console.log(isChecked); // {}, true || false
}

I am able to get the state of the checkbox, but not the name and value. Upon printing to the console, obj is undefined. I would like to apply filters to a dataset based on the name and value of the checkbox.

How do I get the name and value of the checked checkboxes, so I can do that?

Saksham · Accepted Answer · 2019-05-20 19:42:59Z

8

You may replace your ngModelChange event to click event where you pass the event object as

(change)="GetStats($event)"

and in the component method, try to get name, value and checked state as

GetStats(event: Event) {
    console.log(event.target.name, event.target.value, event.target.checked);
}

See more in the stackblitz https://stackblitz.com/edit/angular-get-dynamic-checkbox-attributes

answered May 20, 2019 at 19:42

Saksham

9,4209 gold badges48 silver badges75 bronze badges

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

Comments

developing2020 · Accepted Answer · 2019-05-20 19:27:24Z

1

You could add a dynamic id to each checkbox:

<input type="checkbox" [attr.id]="uniqueIdHere" ... >

Then access your checkbox properties like so:

var checkboxValue = (<HTMLInputElement>document.getElementById("uniqueIdHere")).value;

If your checkboxes are generated via a loop, you could use the index as part of the [attr.id]

answered May 20, 2019 at 19:27

developing2020

3221 silver badge10 bronze badges

Comments

saidutt · Accepted Answer · 2019-05-20 19:35:38Z

1

It would be better to know what version you are working on. This would be one of the approaches:

<input type="checkbox" 
   name="automotive" 
   value="car" (change)="checkValues($event)" 
   ngModel 
   (ngModelChange)="filterResults(obj, $event)">

and in the respective .ts file

checkValues(e: any) { console.log(e) }

You must find all the attributes you are looking for in the source property.

answered May 20, 2019 at 19:35

saidutt

2891 silver badge7 bronze badges

2 Comments

Jake Over a year ago

Angular 7 is the version I am using.

saidutt Over a year ago

Perfect, the above method should work and fetch all the values you were expecting. Also I personally prefer Angular Material material.angular.io/components/checkbox/overview

Leandro Hernández Mira · Accepted Answer · 2019-05-20 19:57:59Z

1

I think that you can makes this:

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'car'}, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'truck'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'shirts'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'pants'}, $event)">

edited May 20, 2019 at 19:57

answered May 20, 2019 at 19:51

Leandro Hernández Mira

8471 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

Get checkbox name, value and checked state in Angular

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related