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

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

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

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;         //如果一个也没有不是没选中状态的,那就说明都是选中状态。全选按钮即可以实现全选      }    }

}};

原文地址:https://www.cnblogs.com/ycc-521/p/9983717.html

时间: 2024-10-22 18:44:05

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

js 全选选框与取消全选代码

设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script> var a=document.getElementById("a"); var b=document.getElementsByClassName("b"); //全选与取消全选 var y=true; a.onchange=function(){ if(a.c

Jquery---checkbox的全选或者全部取消

checkbox是我们在系统开发中不可避免地要使用的一个控件.通常的用法就是,任意选中多个checkbox.全选或者全部取消.前段时间刚又碰到了checkbox这方面的用法.几天就抽点时间,简单地总结一下,希望给想要使用checkbox控件的朋友们一点儿帮助. 有时候我们要点击一个checkbox控件,它被选中时,其它checkbox全部被选中,再点击它,即取消选中它,其它checkbox全部被取消选中.这时候我们就可以在HTML或者.jsp文件中使用如下代码来实现此功能.代码如下: <div>

tree的所有节点都勾选上或者取消勾选

还有一个功能,就是让tree的所有节点都勾选上或者取消勾选,在api中找了一下有一个方法: check target 选中指定节点. 那我们只能是选中根节点后,实现全选. getRoot none 获取根节点,返回节点对象. 全选: [javascript]view plaincopyprint? var root = $('#messageInfoAddTree').tree('getRoot'); $("#messageInfoAddTree").tree('check',root

Atom快速进入全屏后隐藏/恢复显示菜单栏

今天用ATOM进入全屏模式,然后偶尔琢磨这个Atom 1.3.2版本的软件的时候, 在菜单栏里面的View里面, 有一个Toggle Menu Bar的选项,好奇的我点击了下,瞬间,菜单栏就不见了.. 经过一番琢磨,终于想到了方法,其实就是通过键盘的快捷键啦. 注:虽然我用的是atom 1.3.2版本的软件,但是原理是一样的.工具/原料 Atom软件,键盘,鼠标,电脑 方法/步骤 首先,当然是打开ATOM软件啦,进入全屏怎么进?按下键盘上面的快捷键F11是最好的. Atom快速进入全屏后隐藏/恢

一个checkbox 用jquery实现全选、全不选

之前因为一个很小的错误弄了很久,现在才做好. 效果图: 肯定还有更简单的方法. 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkbox.aspx.cs" Inherits="WebApp.Test.Checkbox" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http:

WPF DataGrid的DataGridCheckBoxColumn列前台勾选后对应的绑定数据并未更新

WPF用的时间也不短了,还是遇到一些低级问题,好惭愧. 问题是这样的,WPF的DataGrid中,DataGridCheckBoxColumn列绑定了数据源中的一个boo类型的字段,模式为TwoWay,但界面中勾选后,数据源中的对应字段内容并未更新, 这样就好了 Binding="{Binding IsEmergency,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 记录一下答案使这里找到的,微软官方论坛好强大. https://s

Android 全屏显示 and 取消标题栏

先介绍去掉标题栏的方法: 第一种:也一般入门的时候经常使用的一种方法 requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏 注意这句一定要写在setContentView()方法的前面,不然会报错的 第二种:在AndroidManifest.xml文件中定义 <application android:icon="@drawable/icon" android:label="@string/app_name"

谷歌做了45万次不同类型的文本分类后,总结出一个通用的“模型选择算法”...

谷歌做了45万次不同类型的文本分类后,总结出一个通用的"模型选择算法"... 2018年07月25日 17:43:55 阅读数:6 新智元报道 来源:developers.google.com 编译:肖琴.大明 [导读]谷歌官方推出"文本分类"指南教程.为了最大限度地简化选择文本分类模型的过程,谷歌在进行大约450K的文本分类实验后,总结出一个通用的"模型选择算法",并附上一个完整的流程图,非常实用. 文本分类(Text classificati

【Heritrix源代码分析4】开始一个爬虫抓取的全流程代码分析

在创建一个job后,就要开始job的运行,运行的全流程如下: 1.在界面上启动job 2.index.jsp 查看上述页面对应的源代码 <a href='"+request.getContextPath()+"/console/action.jsp?action=start'>Start</a> 3.action.jsp String sAction = request.getParameter("action"); if(sAction !