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

☛ 【实现】：

<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. WCF练习小程序总结

    1.什么是WCF 严格的说,WCF就是专门用于服务定制.发布与运行以及消息传递和处理的一组专门类的集合,也就是所谓的“类库”.这些类通过一定方式被组织起来,共同协 作,并为开发者提供了一个统一的编程模 ...

  2. H5网页动画制作（页面切换、效果等）

    网址 http://www.ih5.cn/#mine/home/194080 13482289820 视频教程 http://file.ih5.cn/?nid=713629&key=aef10 ...

  3. 转 velocity 模板使用总结

    Velocity是一个基于java的模板引擎.它允许任何人仅仅简单的使用模板语言来引用由java代码定义的对象. 当Velocity应用于web开发时,界面设计人员可以和java程序开发人员同步开发一 ...

  4. Oracle 权限查询

    查看当前用户权限:SQL> select * from session_privs; 查询某个用户被赋予的系统权限. Select * from user_sys_privs; 或者: sele ...

  5. 原创：ASP.Net状态管理读书笔记--思维导图

    导图文件下载 课前提问几个问题 使用Session 配置 model aspnet_regsql.exe 常见问答 问:为什么Session在有些机器上偶尔会丢失?答:可能和机器的环境有关系,比如:防 ...

  6. C#抽象类、抽象方法、抽象属性

    定义 在C#中使用关键字 abstract 来定义抽象类和抽象方法. 不能初始化的类被叫做抽象类,它们只提供部分实现,但是另一个类可以继承它并且能创建它们的实例."一个包含一个或多个纯虚函数 ...

  7. Linux的五个查找命令（find、locate、whereis、which、type）

    1. find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件. find的使用格式如下: $ find <指定目录> <指定条件> <指定动作> ...

  8. bzoj 1823: [JSOI2010]满汉全席

    #include<iostream> #include<cstdio> #include<cstring> using namespace std; ],next[ ...

  9. POJ 1202 Family 概率,DP,高精 难度:2

    http://poj.org/problem?id=1202 难度集中在输出格式上,因为输出格式所以是高精度 递推式: 血缘肯定只有从双亲传到儿子的,所以,设f,m为双亲,son为儿子,p[i][j] ...

  10. HDU 3567 Eight II 打表,康托展开,bfs,g++提交可过c++不可过 难度:3

    http://acm.hdu.edu.cn/showproblem.php?pid=3567 相比Eight,似乎只是把目标状态由确定的改成不确定的,但是康托展开+曼哈顿为h值的A*和IDA*都不过, ...