在angular開發中單選框可以獲取到值，但是複選框傳統的方式獲取的值是true和false，但是實際開發中往往需要獲取到值或者是id

<div class="form-group">
    <label>性別:</label>
    <div class="radio">
        <label class="radio-inline" *ngFor="let item of sex">
            <input type="radio" formControlName="sex" [value
 
]="item"/>{{item}} 
        </label>
    </div>
</div>
<div class="form-group">
    <label>興趣愛好:</label>
    <div class="checkbox">
        <label *ngFor="let item of hobbyList" class="checkbox-inline">
            <input type="checkbox" (click)="selectCheckbox($event.target.checked,item)"
 
/>
            {{item}}</label>
    </div>
</div>

private hobbyList:Array<string> = ["籃球","足球","羽毛球"];
private sex:Array<string> = ["男","女"];
private selectHobby:Array<string> = [];
...
//定義一個複選框的選中方法
selectCheckbox(check:boolean,value:string){
  //先判斷選中的數組裡面是否包括當前值,includes目前不支援
 

  //var isInclude:boolean = this.selectHobby.includes(value); 
  var index:number = this.selectHobby.indexOf(value);
  //當前選擇的就追加否則就移除
  if(check){
    if(index < 0){
      this.selectHobby.push(value);
    }
  }else{
    if(index > -1){
      this.selectHobby = this.selectHobby.filter((ele,index)=>{
        return ele != value;
      })
    }
  }
  this.myform.value["hobby"] = this.selectHobby.toString();
}