如何使用Javascript将多个选定的复选框值添加到数组中？

Question

I have an input element being populated using the *ngFor loop fetching the data from another array. On selecting multiple checkboxes, I need their values to be pushed into my empty array 'selectedArr'. Find below the code:

 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

Try like this:

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

Working Demo

Answer 2

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s). Since you are passing the index, you can access the clicked element like:

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

Answer 3

please, the things easy works easy. You needn't actually manually the array. You should use a function (*)

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

(*) this allow you "start" the app with some selected