html - 如何使用angular 6获取 typescript 文件中多个复选框的值？

Question

我的 html 中有 8 到 10 个复选框。我需要将选中的复选框值发送到我的 typescript 文件。

<div>
    <input type="checkbox" value="one" id="one" name="num">
    <input type="checkbox" value="two" id="two" name="num">
    <input type="checkbox" value="three" id="three" name="num">
    <input type="checkbox" value="four" id="four" name="num">
</div>

如何在我的 ts 文件中获取所有选中的复选框值？有人可以帮我解决这个问题吗？

Answer 1

您可以使用一个包含复选框信息的数组、ngFor 循环和 ngModel:

checkboxes = [
    {
      value: 'one',
      selected: false
    },
    {
      value: 'two',
      selected: false
    },
    {
      value: 'three',
      selected: false
    },
    {
      value: 'four',
      selected: false
    }
  ]

你的 html :

<div>
    <input *ngFor="let ch of checkboxes" [(ngModel)]="ch.selected" type="checkbox" value={{ch.value}} id={{ch.value}}  name="num">
</div>

<button (click)="getSelected()">Print selected checkboxes</button>

getSelected() 函数:

public getSelected() {
    let result = this.checkboxes.filter((ch) => { return ch.selected })
                     .map((ch) => { return ch.value });
    console.log(result);
}