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

☛ 【实现】：

<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. Introduction to Windows 8: The Definitive Guide for Developer

    <Windows 8应用开发权威指南>介绍 Introduction to Windows 8: The Definitive Guide for Developer 一.封面设计要求及文 ...

  2. Tomcat6.0总是运行不了 总是出现Unable to open the service 'Tomcat6'

    如果配置没有问题的话,如果你是win7系统,在开始菜单运行Tomcat,运行提示"Unable to open the service ‘tomcat6’"的话,应该是win7的安 ...

  3. 安卓/res/menu/的使用

    <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http:/ ...

  4. FOJ 2105 Digits Count

    题意:对一串数字进行抑或某数,和某数,或某数,统计某区间和的操作. 思路:因为化成二进制就4位可以建4颗线段树,每颗代表一位二进制. and 如果该为是1  直接无视,是0则成段赋值为0: or  如 ...

  5. Python背景色与语法高亮主题配置

    使用python idle的人恐怕都无法忍受默认的白色背景,及其语法高亮主题. 大家更倾向于使用黑色背景. 用户目录 的.idlerc 目录: 下面的各个系统下对应的该文件的位置: 在Linux系列系 ...

  6. wcf精通1-15

    随笔- 197  文章- 0  评论- 3407  十五天精通WCF——第一天 三种Binding让你KO80%的业务   转眼wcf技术已经出现很多年了,也在.net界混的风生水起,同时.net也是 ...

  7. xml装php数组

    $data = simplexml_load_string($res, 'SimpleXMLElement', LIBXML_NOCDATA); $arr = converArray($data); ...

  8. 【未完成0.0】Noip2012提高组day2 解题报告

    第一次写一套题的解题报告,感觉会比较长.(更新中Loading....):) 题目: 第一题:同余方程 描述 求关于x的同余方程ax ≡ 1 (mod b)的最小正整数解. 格式 输入格式 输入只有一 ...

  9. C- printf的使用

    ASC C之后引入的一个特性是,相邻的字符可以被自动连接 /* printf.cc * 2014/09/02 update */ #include <iostream> using nam ...

  10. HDU 4085 斯坦纳树

    题目大意: 给定无向图,让前k个点都能到达后k个点(保护地)中的一个,而且前k个点每个需要占据后k个中的一个,相互不冲突 找到实现这个条件达到的选择边的最小总权值 这里很容易看出,最后选到的边不保证整 ...