Angular实现全选后的取消其中一个选项则不能实现全选

全选与取消选择的实现

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ycc-521/p/9983717.html

文章标签：

#javascript #ViewUI

本文详细介绍了在表格中实现全选与个别项取消选择的功能，通过监听复选框的状态变化来判断是否所有项都被选中，从而更新全选按钮的状态。关键在于遍历列表检查每一项的状态。

在前面一章我们实现了全选与反选，那么在这一章我们要实现的是取消个别的则不能实现全选

也应该从状态是否被选中入手

html:

<td>
  <input type="checkbox" [(checked)]="item.status" (click)="checkboxClick($event,i);checkBoxOne()">
</td>

checkboxClick(e,i){
  let checkedOne = e.target.checked;   //首先获得当前状态
  this.sampleList[i].status = checkedOne;   
  if(!checkedOne){             // 如果当前没有被选中
    this.master = false;       //不能实现全选则全选按钮也没有被选中
  }else {
    for(let m=0;m<this.sampleList.length;m++){        //遍历表格中的每一个
      let key = this.sampleList[m];
      if(!key.status){                    //如果有一个未选中，则不能实现全选，现在就要终止循环，不再继续进行
        this.master = false;
        break;
      }else{

        this.master = true;         //如果一个也没有不是没选中状态的，那就说明都是选中状态。全选按钮即可以实现全选
      }
    }

  }
};