【问题标题】：How to access multiple checkbox values in Angular 4/5如何在 Angular 4/5 中访问多个复选框值
【发布时间】：2018-10-14 20:26:34
【问题描述】：

我想从我的复选框中获取值，但我只能得到真或假。

这是我的模板：

<h4>Categories</h4>
<div class="form-check" *ngFor="let cat of categories$|async">
    <input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

这是我的组件

this.categories$ = this.storeService.getAllCategories().pipe(
    map(result => (result as any).data),
    tap(r => console.log(r))
)

我的组件基本上是从外部 api 获取类别列表

【问题讨论】：

您的意思是，当您选中带有“Tom Ford”的复选框时，您应该将“Tom Ford”作为值，而不是true 或false？
我希望我的数据是这样的品牌：Tom Ford 或品牌的 id
尝试使用[(ngModel)]="cat.name"这样的名称绑定
因为checkbox 采用布尔值来检查或取消检查。因此，您不能使复选框具有“名称”作为值。您可以使用{change) 触发检查更改的方法来做必要的事情。

标签： angular checkbox angular-forms

【解决方案1】：

您可以简单地使用change 事件在复选框单击时获取事件，如下所示 -

<div class="form-check" *ngFor="let cat of categories">
    <input class="form-check-input" (change)="onChange(cat.name, $event.target.checked)"name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

onChange(email:string, isChecked: boolean) {
      if(isChecked) {
        this.emailFormArray.push(email);
      } else {
        let index = this.emailFormArray.indexOf(email);
        this.emailFormArray.splice(index,1);
      }
  }

更新

如果选中所有复选框，您可以循环它们 -

    et checkBoxes = document.querySelectorAll('.form-check-input');
    checkBoxes.forEach(ele => ele.click())

working example

【讨论】：

您的示例有效，但在我的视图中没有看到复选框？
只是在您的视图中正确绑定并尝试使用|json pipe 打印视图部分中的json
如何一次选中所有复选框？
@Santosh 请检查更新的答案和 Stackblitz 示例
@PardeepJain，我们应该避免在 Angular 中使用 querySelectorAll（如果它是不必要的）。 Angular 工作关系模型（.ts 中的变量）与视图（.html）。所以“角度方式”是使用 [(ngModel)] 或反应形式，看我的回答

【解决方案2】：

您可以使用带有复选框控件的更改事件，如下所示，

<div class="form-check" *ngFor="let cat of categories$|async">
    <input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}" (change)="onChangeCategory($event, cat)">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

来自component.ts文件，

    tempArr: any = { "brands": [] };

    onChangeCategory(event, cat: any){ // Use appropriate model type instead of any
      this.tempArr.brands.push(cat.name);

    }

【讨论】：

我真正想要的是一个类似的数组：{ "brands":[ "Tom Ford", "Rolex" ] }
谢谢这正是我正在寻找的我正在使用 indexOf 不添加重复项
如果我希望所有复选框在开始时都为 false 怎么办？

【解决方案3】：

不需要使用事件更改并使用辅助变量来存储数组。您可以简单地使用 getter 来获取值

如果我们使用 as [(ngModel)] 'cat.isChecked'

<div class="form-check" *ngFor="let cat of categories">
    <input class="form-check-input" [(ngModel)]="cat.isChecked" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

我们可以有一些类似的：

get values()
{
    return this.categories.filter(x=>x.isChecked).map(x=>x.id)
}

如果我们需要“检查所有”，我们可以使用

<input #checkAll type="checkbox" (change)="selectAll(checkAll.checked)">

  selectAll(checked:any)
  {
    this.categories.forEach(x=>x.isChecked=checked)
  }

见the stackblitz

【讨论】：

您在答案中使用的好方法。

【解决方案4】：

您想从复选框中获取值。 Checkbox 代表一个布尔值。所以得到true 和false 是你应该得到的。

【讨论】：

【解决方案5】：

检查这个 Angular Typescript example link

更新 HTML 模板

  <ul class="checkbox-items">
    <li *ngFor="let item of checkboxesDataList">
      <input type="checkbox" [(ngModel)]="item.isChecked" (change)="changeSelection()">{{item.label}}
    </li>
  </ul>

组件类

  checkboxesDataList = [
    {
      id: 'C001',
      label: 'Photography',
      isChecked: true
    },
    {
      id: 'C002',
      label: 'Writing',
      isChecked: true
    },
    {
      id: 'C003',
      label: 'Painting',
      isChecked: true
    },
    {
      id: 'C004',
      label: 'Knitting',
      isChecked: false
    },
    {
      id: 'C004',
      label: 'Dancing',
      isChecked: false
    },
    {
      id: 'C005',
      label: 'Gardening',
      isChecked: true
    },
    {
      id: 'C006',
      label: 'Drawing',
      isChecked: true
    },
    {
      id: 'C007',
      label: 'Gyming',
      isChecked: false
    },
    {
      id: 'C008',
      label: 'Cooking',
      isChecked: true
    },
    {
      id: 'C009',
      label: 'Scrapbooking',
      isChecked: false
    },
    {
      id: 'C010',
      label: 'Origami',
      isChecked: false
    }
  ]


  // Selected item
  fetchSelectedItems() {
    this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {
      return value.isChecked
    });
  }

  // IDs of selected item
  fetchCheckedIDs() {
    this.checkedIDs = []
    this.checkboxesDataList.forEach((value, index) => {
      if (value.isChecked) {
        this.checkedIDs.push(value.id);
      }
    });
  }

【讨论】：