javascript - 如何获取多个选中的复选框值？

Question

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

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

然后我以下列方式在我的 View 中显示它们:

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

那么现在的问题是，我如何才能只收集选中的值，以便将它们发送到服务器？

Answer 1

我建议您使用对象数组而不是数组，因为我认为要完全达到您想要的效果几乎不可能或非常困难。

我们可以创建如下变量:

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>

当用户选中任何一个复选框时，它的值将变为 true，并基于此值，将显示一个已选中元素的数组。

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

Plunker link