Javascript 如何获取多个复选框值？

我从数据库中取出复选框名称，将它们放入数组中，使它们看起来像这样：

pets = ['dog', 'hamster', 'cat', 'parrot']

然后，我以以下方式在视图中显示它们：

<div *ngFor='let pet of pets'>
  <input type='checkbox'
     name='pets'
     value='{{pet}}'
  />
  {{pet}}
</div>

{{pet}}

---

所以现在的问题是，我如何才能只收集已检查的值，以便将其发送到服务器？

我建议您使用对象数组而不是数组，因为我认为这几乎不可能或很难实现您想要的准确结果

我们可以创建以下变量：

pets = [{key: 'dog', isChecked: false}, {key: 'hamster', isChecked: false}, {key: 'cat', isChecked: false}];

并将每个对象连接到

ngModel

，它将保存每个复选框的值

<div *ngFor='let pet of pets'>
    <input type='checkbox'
     name='pets'
     value='{{pet}}'
     [(ngModel)]='pet.isChecked'
     (change)='check()'
    />
    {{pet.key}} - {{pet.isChecked}}
</div>

---

@BillyLogan干杯！

check(){
   this.arr = [];
   this.pets.forEach(v => v.isChecked ? this.arr.push(v.key) : v);
}