javascript - 如何使用 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>

标签： javascripthtmlarraysangulartypescript

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

工作演示