Как добавить несколько выбранных значений флажков в массив, используя Javascript?

Question

У меня есть элемент ввода, заполняемый с помощью * ngFor l oop, извлекающий данные из другого массива. При выборе нескольких флажков мне нужно, чтобы их значения были помещены в мой пустой массив selectedArr. Найдите ниже код:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  toDo = ["Test", "Eat", "Sleep"];
  task: string;
  addTask(task: string) {
    this.toDo.push(task);
  }
  selectedArr = [];
  deleteValue() {}

  addSelected(i) {
    let checkId = document.getElementsByClassName("i");
    console.log(checkId);
    if (checkId.checked === true) {
      this.selectedArr.push(i);
    }
    console.log(this.selectedArr);
  }
}

<div>
  <div class="form-group">
    <label>Add a Task: </label>
    <input class="form-control" type="text" [(ngModel)]="task" />
  </div>
  <button (click)="addTask(task)">Add</button>
  <br />
  <br />
  <div>
    My To Do List:
    <ul>
      <li *ngFor="let todo of toDo, index as i">
        <input class="i" type="checkbox" (click)="addSelected(i)" />
        {{todo}}
      </li>
    </ul>
  </div>
  <div class="btn class">
    <button class="btn btn-primary" (click)="deleteValue()">Delete</button>
  </div>
</div>

Answer 1

Попробуйте так:

. html

 <li *ngFor="let todo of toDo, index as i">
     <input class="i" type="checkbox" [(ngModel)]="checked[i]" (ngModelChange)="addSelected(todo,$event)" />
    {{todo}}
 </li>

.ts

  checked = []

  selectedArr = [];


  addSelected(item,evt) {
    if (evt) {
      this.selectedArr.push(item);
    }else {
      let i = this.selectedArr.indexOf(item)
      this.selectedArr.splice(i,1)
    }
  }

Рабочая демонстрация

Answer 2

пожалуйста, все легко работает легко. Вам не нужно на самом деле вручную массив. Вы должны использовать функцию (*)

get selectedArray()
{
    return this.toDo.filter((x,index)=>this.checked[index])
}

<li *ngFor="let todo of toDo, index as i">
     <!--remove (ngModelChange) -->
     <input class="i" type="checkbox" [(ngModel)]="checked[i]" />
    {{todo}}
</li>
{{selectedArray}}

(*), которая позволит вам «запустить» приложение с некоторыми выбранными

Answer 3

Метод getElementsByClassName интерфейса Document возвращает массивоподобный объект всех дочерних элементов, которые имеют все заданные имена классов. Поскольку вы передаете индекс, вы можете получить доступ к нажатому элементу, например:

addSelected(i) {
   let checkId = document.getElementsByClassName("i")[i];
   console.log(checkId);
   if (checkId.checked) {
      this.selectedArr.push(i);
   } else {
      // Remove the index from selectedArr if checkbox was unchecked
      let idx = this.selectedArr.indexOf(i)
      if (idx > -1) this.selectedArr.splice(idx, 1)
   }
   console.log(this.selectedArr);
}