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

☛ 【实现】：

<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. ArangoDB介绍——未知架构和底层原理

    ArangoDB介绍 ArangoDB是一个开源NoSQL数据库,官网:https://www.ArangoDB.org/ArangoDB支持灵活的数据模型,比如文档Document.图Graph以及 ...

  2. 230. Kth Smallest Element in a BST ——迭代本质：a=xx1 while some_condition: a=xx2

    Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. Not ...

  3. 为什么 Node.js 这么火，而同样异步模式 Python 框架 Twisted 却十几年一直不温不火？

    twisted是一个强大的异步网络框架,应用的面也非常广,但是没有这几年才出现的Node.js火,社区.文档也是很少可怜我觉得二者其实在本质上差不多,而且python使用起来还是比较容易一些的 匿名用 ...

  4. PDF 补丁丁 0.4.1.728 测试版发布

    书签编辑器新增预览界面,可查看书签所连接到文档的页数. 该功能将继续完善,请各位关注.

  5. node.js 对接公众平台

    http://www.tfan.org/wp-content/uploads/使用-Nodejs-和-MongoDB-开发高性能微信公众平台应用.pdf

  6. 如何在 Linux 中整理磁盘碎片

    有一个神话是 linux 的磁盘从来不需要整理碎片.在大多数情况下这是真的,大多数因为是使用的是优秀的日志文件系统(ext3.4等等)来处理文件系统.然而,在一些特殊情况下,碎片仍旧会产生.如果正巧发 ...

  7. 基于TCP的通信 客户端

    #include <WINSOCK2.H> #include <stdio.h> // socket 套接字 #pragma comment (lib,"Ws2_32 ...

  8. Eclipse汉化问题解决

    1.删除eclipse/configuration 目录下的 org.eclipse.osgi 和org.eclipse.update 两个子目录2.重新启动 eclipse

  9. 第一次编辑JAVA

    其实就是根据例题来进行编辑,但并不是一次就对了的,有大小写输入出错的问题,有漏掉标点符号的问题,值得注意的是,所有的标点符号都需要是在英文输入法状态下输入的,最后的问题——例题所用的C盘给我们带来了系 ...

  10. IOC（控制反转和依赖注入）之Autofac

    Autofac是一款IOC框架,比较于其他的IOC框架,如Spring.NET,Unity,Castle等等所包含的,它很轻量级性能上也是很高的.于是,今天抽空研究了下它.下载地址:http://co ...