Sahil
Sahil

Reputation: 553

How to get multiple checkbox value on button click?

<td><p><input  class="checkbox"  type="checkbox" value="Cars.id"> </p> </td> 

this is list of cars id with checkbox.

     <button (click)="duplicate()" ><ion-icon  name="color-wand"></ion-icon> </button> 

on this button click i want to get value of all cars in my .ts file. here is the function in .ts

duplicate(){
    var checkedValue = document.querySelector('.messageCheckbox:checked');
}

Upvotes: 1

Views: 2164

Answers (2)

Pardeep Jain
Pardeep Jain

Reputation: 86730

In order to get values of selected multiple checkboxes, No need to use DOM selectors as given in above answers you can do this in angular way.

In order to get all values of checkbox, there are several ways are available in Angular. In this answer I'll show you without using any formArray. like this -

<div *ngFor="let Car of Cars">
      <input type="checkbox" (change)="onChange(Car.id, $event.target.checked)"> {{Car.email}}<br>
  </div>

<button (click)="duplicate()" >Get values </button> 
 ----------------------------
emailFormArray: Array<any> = [];
  Cars = [ 
    {email:"email1", id: 1},
    {email:"email2", id: 2},
    {email:"email3", id: 3},
    {email:"email4", id: 4}
  ];

  onChange(email:string, isChecked: boolean) {
      if(isChecked) {
        this.emailFormArray.push(email);
      } else {
        let index = this.emailFormArray.indexOf(email);
        this.emailFormArray.splice(index,1);
      }
  }

  duplicate() {
    console.log(this.emailFormArray);
  }

Working Example

Upvotes: 2

GibboK
GibboK

Reputation: 73908

First make sure you do not duplicated ids.

You can use document.querySelector() to query the dom and get the values.

<td> <p>  <input id="checkbox1" class="messageCheckbox" type="checkbox" value="Audi"> </p> /td>
<td> <p>  <input id="checkbox2" class="messageCheckbox" type="checkbox" value="BMW"> </p> /td>
<td> <p>  <input id="checkbox3" class="messageCheckbox" type="checkbox" value="Tesla"> </p> /td>

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

In Angular you could try to use the directive input[checkbox] more info here:

https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

Upvotes: 1

Related Questions