Angular6实现复选框的全选

顾名思义全选就是点击全选按钮所有的复选框按钮都会被选中！话不多说，直接上代码

这里实现点击全选表格中的选择一列的复选框全部被选中，批量操作按钮变为可编辑状态，再次点击全选则取消全选批量操作按钮变为不可编辑状态

　　

 

html:<span><input type="checkbox" [(checked)]="master" (click)="checkAll($event)">全选</span>  
表格项：
　　

<table class="form-table table-bordered" id="formTables">
  <thead>
  <tr class="table-head">
    <th>序号</th>
    <th>检测编号</th>
    <th>检材名称</th>
    <th>检材形状</th>
    <th>检材颜色</th>
    <th>送检重量</th>
    <th>称重设备</th>
    <th>备注</th>
    <th>分类标识</th>
    <th>选择</th>
  </tr>
  </thead>
  <tbody>
  <tr class="cursor" *ngFor="let item of sampleList;let i=index">
    <td>{{i+1}}</td>
    <td>{{item.sampleId}}</td>
    <td>{{item.sampleName}}</td>
    <td>{{item.sampleShape}}</td>
    <td>{{item.sampleColor}}</td>
    <td>{{item.weight}}</td>
    <td>{{item.equipment}}</td>
    <td>{{item.remarks}}</td>
    <td>
      <span><input type="checkbox" disabled [(checked)]="item.trainStatus">训练样本</span>
      <span class="m-l-xs"><input type="checkbox" disabled [(checked)]="item.testStatus">测试样本</span>
      <span class="m-l-xs"><input type="checkbox" disabled [(checked)]="item.otherStatus">其他样本</span>
    </td>
    <td>
      <input type="checkbox" [(checked)]="item.status" (click)="checkboxClick($event,i);checkBoxOne()">
    </td>
  </tr>
  </tbody>
</table>

ts:　　　　

sampleList = [
  {sampleId:'201702010-1',sampleName:'甲卡西酮',sampleShape:'粉末',sampleColor:'红色',weight:3.2,equipment:'JY1002电子天平',
    remarks:'甲基苯',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-2',sampleName:'四氢大麻酚', sampleShape:'粉末',sampleColor:'红色',weight:4.23,equipment:'JY1002电子天平',
    remarks:'吗啡定量',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-3',sampleName:'α-氰基苯丙酮',sampleShape:'粉末', sampleColor:'黄色',weight:3.16,equipment:'JY1002电子天平',
    remarks:'可卡因定性',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-4',sampleName:'氯代麻黄碱', sampleShape:'粉末',sampleColor:'红色',weight:2.35,equipment:'JY1002电子天平',
    remarks:'可卡因定量',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-5',sampleName:'1-（3-氯苯基）哌嗪', sampleShape:'粉末',sampleColor:'红色',weight:1.56,equipment:'JY1002电子天平',
    remarks:'甲基苯',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-6',sampleName:'甲卡西酮',sampleShape:'粉末', sampleColor:'黄色',weight:3.02,equipment:'JY1002电子天平',
    remarks:'甲基苯',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-7',sampleName:'四氢大麻酚',sampleShape:'粉末', sampleColor:'黄色',weight:4.23,equipment:'JY1002电子天平',
    remarks:'罂粟定量',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-8',sampleName:'α-氰基苯丙酮',sampleShape:'粉末', sampleColor:'黄色',weight:3.26,equipment:'JY1002电子天平',
    remarks:'甲卡西酮定量',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-9',sampleName:'氯代麻黄碱',sampleShape:'粉末', sampleColor:'黄色',weight:3.56,equipment:'JY1002电子天平',
    remarks:'甲卡西酮定性',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-10',sampleName:'1-（3-氯苯基）哌嗪',sampleShape:'粉末', sampleColor:'红色',weight:4.18,equipment:'JY1002电子天平',
    remarks:'氰化钾定性',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-11',sampleName:'氯代麻黄碱',sampleShape:'粉末', sampleColor:'红色',weight:3.15,equipment:'JY1002电子天平',
    remarks:'氰化钾定性',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-12',sampleName:'1-（3-氯苯基）哌嗪',sampleShape:'粉末', sampleColor:'红色',weight:3.24,equipment:'JY1002电子天平',
    remarks:'甲卡西酮定量',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-13',sampleName:'氯代麻黄碱',sampleShape:'粉末', sampleColor:'黄色',weight:5.12,equipment:'JY1002电子天平',
    remarks:'甲基苯',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-14',sampleName:'四氢大麻酚',sampleShape:'粉末', sampleColor:'黄色',weight:2.46,equipment:'JY1002电子天平',
    remarks:'吗啡定量',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:'201702010-15',sampleName:'1-（3-氯苯基）哌嗪', sampleShape:'粉末',sampleColor:'黄色',weight:2.58,equipment:'JY1002电子天平',
    remarks:'可卡因定量',trainStatus:false,testStatus:false,otherStatus:false,status:false},
]

master:boolean = false; //默认全选按钮没有被选中

batchShow:boolean = true; //批量操作按钮是否可以编辑

// 全选
checkAll(e){
  let checked = e.target.checked;  //判断全选按钮是否被选中
  if(checked){
    this.sampleList.forEach(function(key,val){       //遍历表格数据的列表项
      key.status=true;                               //选择那一列所有的都会被选中
    });

this.batchShow = false;

  }else{
    this.sampleList.forEach(function(key,val){       //全选按钮被选中，则遍历表格数据项，将状态设置为false
      key.status=false;
    });

this.batchShow = true;

  }
  this.master = checked;
}

以上所写则可以实现全选批量操作按钮可以点击，反选批量操作按钮不可以点击