<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">

    </script>

    <script>

    $(document).ready(function () {

    var xsChk = 'px';//定义的样式

var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox

$(xsChkAll).each(function () {

    var name = $(this).prop("name");

    name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox

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

        $(name).prop("checked", $(this)[0].checked);

    })

    var xschk = $(this);

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

        var IAll = $(name).length; //此子项目下所有checkbox的个数

        var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数

        var isAllChecked = true; //是否是全选

        if (IAll != IChk) {

            isAllChecked = false;

        }

        $(xschk).prop("checked", isAllChecked);

    });

});

});

    </script>

        <legend>全选one</legend>

        <input type="checkbox" class="xsChk" name="chk" />

        全選

        <input type="checkbox" name="chk" />

        1<br />

        <input type="checkbox" name="chk" />

        2<br />

        <input type="checkbox" name="chk" />

        3<br />

        <input type="checkbox" name="chk" />

        4<br />

        <legend>全选two</legend>

        <input type="checkbox" class="xsChk" name="chk1" />

        全選2

        <input type="checkbox" name="chk1" />

        11<br />

        <input type="checkbox" name="chk1" />

        22<br />

        <input type="checkbox" name="chk1" />

        33<br />

        <input type="checkbox" name="chk1" />

        44<br />

</body>

</html>

本文修改于博客园里一个案例，现在找不到这遍文章的地址，特此说明！

Jquery中对checkbox的各种“全选”或者“取消”功能实现（特别注意1.6+的一定不能使用attr来取属性了！用prop！）的更多相关文章

  1. checkbox全选和取消功能

    这是开发中常见的小功能,想当初我也曾对于attr和prop的不了解踩过坑. 前端工作中,常常会使用到select复选框,select复选框有一个属性checked,当使用js或者jquery控制这个属 ...

  2. 如何在repeater中找到checkbox并实现全选删除

    checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat＝server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码  ...

  3. 使用js实现复选框的全选、取消功能

    id为all的想设置全选的那个框的id,name为checkname[]的是每个小复选框: 第一种: <script> function checkAll() { var all=docu ...

  4. 全选、取消、2级 checkbox的选中切换

    需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...

  5. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  6. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  7. Jquery 利用单个复选款（checkbox）实现全选、反选

    1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...

  8. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  9. JS实现全选与取消 Jquery判断checkbox是否被选中

    1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...

随机推荐

  1. uoj 66 新年的巧克力棒 数学

    #66. 新年的巧克力棒 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/66 Description 马上就要 ...

  2. Tasker, Android系统增强神器

    Tasker是一个让系统根据用户定制的”配置文件”(Profiles),在特定的”背景”下(Contexts),执行指定”任务”(Tasks)的软件, 除此之外,它还提供”可供点击”的(Clickab ...

  3. 移动端 关于 键盘将input 框 顶上去的解决思路---个人见解

    在移动端,经常会遇到input获得焦点时候弹出的虚拟键盘将整体页面布局打乱的情况. 比如说是这种 输入框未获得焦点键盘未抬起的时候: 输入框获得焦点键盘抬起的时候 这种情况下,不管是上面的textar ...

  4. EF DBContext中DbSet中Hashset添加对象后，DataGrid UI没有刷新的问题

    使用EF4/5添加数据库视图生成DBContext,如果数据表/对象之间有M-N对应关系,EF对自动添加引用类集合,是Hashset类型.由于不是ObservableCellection类型,在引用类 ...

  5. jquery微博实例

    1.代码实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. 2016年终总结--一个Python程序猿的跨界之旅

    时间过得真快.感觉15年年终总结刚写完,16年就结束了.看了blog,16年就写了可怜的8篇,对我来说16年还算顺风顺水. 真正可能出乎意料的是年底我离开了呆了2年半的龙图游戏,临时放弃了用了3年半的 ...

  7. OpenCV学习(14) 细化算法(2)

          前面一篇教程中,我们实现了Zhang的快速并行细化算法,从算法原理上,我们可以知道,算法是基于像素8邻域的形状来决定是否删除当前像素.还有很多与此算法相似的细化算法,只是判断的条件不一样. ...

  8. go语言基础之运算符

    一.运算符分类 1.1 算术运算符 运算符 术语 示例 结果 + 加 10 + 5 15 - 减 10 - 5 5 * 乘 10 * 5 50 / 除 10 / 5 2 % 取模(取余) 10 % 3 ...

  9. Fragment 创建 传递参数 跳转【典例】

    Fragment一定要有一个无参的构造方法! 因为当Activity因屏幕旋转或者因内存不足被系统杀死时,会导致Activity被重新创建,而当Activity被重建时,FragmentManager ...

  10. 详细记录ASP.NET中的图象处理

    最近做网站时,要求上传能加上水印,就研究了一下相关的功能.推荐一下程序人生的网站,大家也可以写一些开发感悟在上面.在使用ASP的时候,我们时常要借助第三方控件来实现一些图象功能.而现在,ASP.NET ...