• 类似邮件列表里的复选框
  • 要求双向联动

☛ 【实现】：

<body>

    <div>

        <input type="checkbox" name="checkAll">全选

    </div>

    <br>

    <div class="cbList">

        <input type="checkbox" name="cb">

        <input type="checkbox" name="cb">

        <input type="checkbox" name="cb">

    </div>

</body>

<script>

    var $ckAll = $('input[name=checkAll]'),

    		$cb = $('input[name=cb]'),

    		$cbList = $('.cbList');

    $ckAll.on('click', function() {

    	var flag = $ckAll.prop('checked');

    	if (flag) {

    		$cb.prop('checked', true);

    	} else {

    		$cb.prop('checked', false);

    	}

    });

    $cbList.on('click', function() {

    	var flag = true;

    	$.each($cb, function(index, item) {

    		if (!$(item).prop('checked')) {

    			flag = false;

    		}

    	});

    	if (flag) {

    		$ckAll.prop('checked', true);

    	} else {

    		$ckAll.prop('checked', false);

    	}

    });

</script>

☛ 【补充】：

(1) 判断是否选中的两种写法：

var flag = $ckAll.prop('checked');

var flag = $ckAll.is(':checked');

(2) 注意 attr 和 prop

attr：作为一个节点属性，初始化之后不会改变

prop：会随着事件而改变

.attr( "checked" ): checked

.prop( "checked" ): true

.is( ":checked" ): true

jQuery实现一个全选复选框联动效果的更多相关文章

  1. 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  2. WPF: 实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图:     这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...

  3. QTableWidget自定义表头QHeaderView加全选复选框

    1         QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...

  4. WPF实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...

  5. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  6. java freemarker导出word时添加或勾选复选框

    最近项目导出word碰到一个需求,要求根据数据动态的决定word里的复选框是否勾选, 公司导出word用的是freemarker,相比较其他技术,freemarker可以很容易的控制输出样式, 在wo ...

  7. ExtJS中，将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

  8. iOS开发-UITableView单选多选/复选实现1

    TableView怎样实现单选或者多选呢? 我们的直接思路是改动某一个Cell的样式就可以, 那么改动样式须要通过改动相应的数据, 从这里能够判断我们须要给Cell相应的数据设置一个标志位, 当选中的 ...

  9. JS-001-单选复选按钮操作

    此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...

  10. MVC 下拉框联动效果(单选)

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...

随机推荐

  1. Asp.Net MVC EF各版本区别

      2009年發行ASP.NET MVC 1.0版 2010年發行ASP.NET MVC 2.0版,VS2010 2011年發行ASP.NET MVC 3.0版+EF4,需要.Net4.0支持,VS2 ...

  2. 600万用户数据导入MYSQL、MSSQL、Oracle数据库方法【转】

      1.导入MySql数据库 参考文献:http://zhuaxia.org/blog/post/145 1.1.LOAD DATA INFILE语法 因为获得的数据库文件是一个文本文件www.csd ...

  3. JAVA EE企业级开发四步走完全攻略 [转]

    http://bbs.51cto.com/thread-550558-1.html 本文是J2EE企业级开发四步走完全攻略索引,因内容比较广泛,涉及整个JAVA EE开发相关知识,这是一个长期的计划, ...

  4. shell学习记录001-知识点储备

    1.BASH(bourne again shell ) cmd1 ;cmd2等同于 cmd1 cmd2 2.echo music; 中的分号不被打印出,因为分号默认为命令定界符号 3.利用pgrep找 ...

  5. 胡扯两句——CDQ分治

    之前听大神讲过CDQ分治大概是个什么东西,但是一直还没有真正去搞过.今天稍微看了一下,写点自己的理解. 首先CDQ分治有两个条件. 条件1:可以分成两个独立互不影响的问题(这里的"独立&qu ...

  6. JobTracker启动流程源码级分析

    org.apache.hadoop.mapred.JobTracker类是个独立的进程,有自己的main函数.JobTracker是在网络环境中提交及运行MR任务的核心位置. main方法主要代码有两 ...

  7. hdu 4632 Palindrome subsequence

    http://acm.hdu.edu.cn/showproblem.php?pid=4632 简单DP 代码: #include<iostream> #include<cstdio& ...

  8. Windows下为64位的python3.4.3安装numpy

    貌似现在没有python3.x的numpy 64位.exe安装包只有.whl的(也可能是我没找到)只能在终端下安装 1.到官网https://www.python.org/downloads/下载py ...

  9. POJ 2992 求组合数的因子个数

    求C(n,k)的因子个数 C(n,k) = (n*(n-1)*...*(n-k+1))/(1*2*...*k) = p1^k1 * p2^k2 * ... * pt^kt 这里只要计算出分子中素数因子 ...

  10. namenode 无法启动之每次开机需要重新格式化-tmp

    最近遇到了一个问题,执行start-all.sh的时候发现JPS一下namenode没有启动        每次开机都得重新格式化一下namenode才可以        其实问题就出在tmp文件,默 ...