Angular2，在多个复选框列表中获取选中复选框的值答案

【问题标题】：Angular2 , in multiple checkboxes list get the value of checked checkboxAngular2，在多个复选框列表中获取选中复选框的值
【发布时间】：2017-03-09 19:19:51
【问题描述】：

我正在使用多个复选框，单击任何复选框时，如果选中为 true，则需要将值推送到数组中，如果选中为 false，则从数组中删除。

有什么方法可以检查复选框是选中还是取消选中像 jquery 这样的点击？

【问题讨论】：

您可以尝试使用 eventEmiiter (click) 像这样(click)=onClick($event.checked)。选中时返回 true，取消选中时返回 false
你能用更多的代码更详细地解释一下吗，因为我使用了 onclick 事件，它显示未定义。 $event 需要什么来导入任何类吗？？

标签： angular ionic2

【解决方案1】：

进一步的评论：

HTML 元素：

<input type="checkbox" (click)="onClick($event)" />

TypeScript 代码：

onClick(event: any) {
 console.log(event); //you can explore the event object and use the values as per requirement
}

【讨论】：

我使用了 event.target.checked 应该返回 true 或 false 但仍然给出 undefined 我是否遗漏了任何东西，我们将不胜感激

【解决方案2】：

查看解决多个复选框问题的类似帖子。 angular-2-get-values-of-multiple-checked-checkboxes

我在这里包含了 angular2 中复选框状态的简单实现

import {Component, NgModule } from '@angular/core';

@Component({
  selector: 'test-app',
  template: `
    <label for="options">Options :</label>
    <div *ngFor="let cbItem of cbArr">
      <label>
        <input type="checkbox"
               name="options"
               value="{{cbItem}}"
               [checked]="cbChecked.indexOf(cbItem) >= 0"
               (change)="updateCheckedOptions(cbItem, $event)"/>
        {{cbItem}}
      </label>
    </div>
    <button (click)="updateOptions()">Post</button>
  `
})
export class TestComponent{
    cbArr: string[];
    cbChecked: string[];
  constructor() {
    this.cbArr = ['OptionA', 'OptionB', 'OptionC'];
    this.cbChecked = ['OptionB'];
  }
  
  updateCheckedOptions(chBox, event) {
      var cbIdx = this.cbChecked.indexOf(chBox);
      if(event.target.checked) {
          if(cbIdx < 0 )
            this.cbChecked.push(chBox);
      } else {
          if(cbIdx >= 0 )
            this.cbChecked.splice(cbIdx,1);
      }
  }
  
  updateOptions() {
    console.log(this.cbChecked);
  }
  
}

这里 cbArr 存储所需的值或选项，而 cbChecked 存储选定的值。在更改复选框值时，cbChecked 被更新 id 复选框项目被更新到其中，最后单击“发布”按钮，您可以简单地打印出所选项目列表的 cbChecked 值。

【讨论】：