Angular2、複数のチェックボックスのリストチェックされたチェックボックスの値を取得

Question

複数のチェックボックスを使用しています。チェックボックスのいずれかをクリックすると、配列の値がtrueにチェックされ、falseにチェックされていれば配列から削除する必要があります。

jqueryのようなクリックでチェックボックスがオンまたはオフになっていることを確認する方法はありますか？

HTML要素：

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

活字体コード：コメントへのさらなる

Answer 1

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

Answer 2

は、複数のチェックボックスのための問題を解決し、この類似の記事をチェックしてください。 angular-2-get-values-of-multiple-checked-checkboxes

私はここに必要な値またはオプションを格納し、cbCheckedが選択された値を格納しcbArrここ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); 
 
    } 
 
    
 
}

のチェックボックスの状態のための単純な実装が含まれています。チェックボックスの値を変更すると、cbCheckedが更新されます。idチェックボックスの項目が更新され、最後に「ポスト」ボタンをクリックすると、選択中の項目のリストのcbChecked値が表示されます。