Angular开发(二十二)-angular处理复选框选值的问题_angular获取复选框的值清空-优快云博客

本文链接：https://blog.youkuaiyun.com/kuangshp128/article/details/72763842

本文介绍如何在Angular中通过自定义方法实现从复选框获取实际值或ID，而非默认的true/false值。该方法适用于响应式表单，并通过点击事件来控制选中状态并更新绑定的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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();
}