Как получить несколько значений флажка при нажатии кнопки?

Question

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

это список автомобилей с флажком.

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

при нажатии этой кнопки я хочу получить значение всех автомобилей в моем файле .ts. вот функция в .ts

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

Answer 1

Чтобы получить значения выбранных нескольких флажков, не нужно использовать селекторы DOM, как указано в ответах выше, вы можете сделать это угловым способом.

Чтобы получить все значения флажка, в Angular доступно несколько способов. В этом ответе я покажу вам без использования formArray. как это -

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

Рабочий пример

Answer 2

Сначала убедитесь, что вы не дублируете идентификаторы.

Вы можете использовать document.querySelector(), чтобы запросить dom и получить значения.

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

В Angular вы можете попробовать использовать директиву input[checkbox] подробнее здесь:

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