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

我使用*ngFor循环从另一个数组获取数据，填充了一个输入元素。选择多个复选框时，我需要将它们的值推送到空数组“selectedArr”中。 下面是代码：

从“@angular/core”导入{Component}；
@组成部分({
选择器：“应用程序根”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
title=“CodeSandbox”；
toDo=[“测试”、“吃”、“睡”]；
任务：字符串；
addTask（任务：字符串）{
this.toDo.push（任务）；
}
selectedArr=[]；
deleteValue（）{}
addSelected（i）{
让checkId=document.getElementsByCassName（“i”）；
console.log（checkId）；
if（checkId.checked==true）{
这个。选择了arr。push（i）；
}
console.log（this.selectedArr）；
}
}

添加任务：
添加




我的待办事项清单：


{{todo}}


删除

试着这样做：

.html

---

接口的

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

---

求你了，简单的事容易做。实际上，您不需要手动创建数组。您应该使用函数（*）

get selectedArray（）
{
返回此.toDo.filter（（x，index）=>this.checked[index]）
}

{{todo}}

{{selectedArray}}

（*）这允许您使用一些选定的内容“启动”应用程序

您应该首先阅读如何启动。而且，永远不要尝试使用Angular从DOM（document.getElementsByCassName）获取元素。

  checked = []

  selectedArr = [];


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

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

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