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

☛ 【实现】：

<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. css——子代与后代选择器

    一直都以为,子代选择器与后代选择器作用是一样的,都是选择一个元素下面的子元素,直到今天才明白: 1.子代选择器(用<连接):ul>li 子选择器仅仅选择ul包围的 子元素 中的 li元素, ...

  2. 377. Combination Sum IV——DP本质：针对结果的迭代，dp[ans] <= dp[ans-i] & dp[i] 找三者关系 思考问题的维度+1，除了数据集迭代还有考虑结果

    Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...

  3. BZOJ2494 Triangles and Quadrangle

    一道非常"简单"的计算几何题... 题意:给你两个三角形和一个四边形,问你能否用这两个三角形拼成这个四边形 首先...四边形可能是凹四边形...需要判断一下...这个比较简单直接分 ...

  4. 如何对HTML进行编码和解码？

    答案:这个比较简单//HTML进行编码和解码Console.WriteLine(System.Web.HttpUtility.HtmlEncode("<h1>我是中文字符!< ...

  5. 在Web中如何使用Windows控件（ActiveX）[转]

    最近做的一个Web项目,需要在网页中播放摄像头采集的实时视频,我们已经有了播放视频的使用C#编写的windows控件,如何将其嵌入到网页中去了?这需要使用一种古老的技术,ActiveX. 1.将.Ne ...

  6. VS2010 winform程序发布步骤

    1.右键单击解决方案,点击“添加”---“新建项目”,如下图: 2.选择“其他项目类型”--“安装和部署”--“Visual Studio Installer”---"安装项目", ...

  7. 自己定制ListView，上拉刷新和下拉刷新，加载网络图片，并且添加缓存机制。

    package com.lixu.listviewrefresh; import java.util.ArrayList; import java.util.HashMap; import java. ...

  8. jQuery中的quickExpr

    jQuery 源码中的 quickExpr 是用来检测参数 selector 是否是复杂的 HTML 代码(如“abc<div>”)或 #id,匹配结果存放在数组 match 中 // A ...

  9. Servlet作业--实现注册和登录

    1.注册页面  zhuce.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  10. HTTP(socket)下载遇到valgrind提示的错误： Conditional jump or move depends on uninitialised value(s)

    我写了个http下载函数,下载txt.jpg都正常,就是下载php有问题:valgrind会报错Conditional jump or move depends on uninitialised va ...