如何使用Javascript將多個選定的復選框值添加到數組中？

Question

我使用 *ngFor 循環填充了一個輸入元素，該循環從另一個數組中獲取數據。 在選擇多個復選框時，我需要將它們的值推送到我的空數組“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

Document接口的getElementsByClassName方法返回具有所有給定類名的所有子元素的類數組對象。 由於您正在傳遞索引，因此您可以訪問單擊的元素，例如：

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

拜托，容易的事情很容易。 您實際上不需要手動創建數組。 你應該使用一個函數 (*)

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

(*) 這允許您“啟動”應用程序並選擇一些