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

Question

I'm using multiple checkboxes and on click of any of the checkbox need to push the value in array if it is checked true and remove from the array if checked false.

Is there any way to check that the checkbox is checked or unchecked on a click like jquery?

Answer 1

Further to the comment:

HTML Element:

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

TypeScript Code:

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

Answer 2

Check this similar post that solves the issue for multiple checkboxes. angular-2-get-values-of-multiple-checked-checkboxes

I have included here a simple implementation for checkbox states in 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); } }

Here cbArr stores the values or options needed and cbChecked stores the selected values. On changing the checkbox value, cbChecked is updated id checkbox item is updated into it and finally on click of "Post" button, you can simply print out the cbChecked values for the list of items under selection.