<!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. [POI2012]Squarks

    [POI2012]Squarks 题目大意: 设有\(n\)个互不相同的正整数\(\{X_1,X_2,...,X_n\}\),任取两个\(X_i,X_j(i\ne j)\),能算出\(X_i+X_j\ ...

  2. [CF226E]Noble Knight's Path

    [CF226E]Noble Knight's Path 题目大意: 一棵\(n(n\le10^5)\)个结点的树,初始时所有结点都是白色.\(m(m\le10^5)\)次操作,操作包含以下两种: 将点 ...

  3. javaWeb导出POI创建的多个excel的压缩文件

    文件效果图: 接口代码: //测试 http://localhost:8080/admin/test/test/poizip @RequestMapping(value = "/poizip ...

  4. JSP myecplise项目移植到ecplise

    把myecplise项目移植到ecplise的一些细节: 参考于http://www.cnblogs.com/liushuijinger/p/3396063.html 因为个人需要,需要把JSP项目从 ...

  5. jQuery如何获取动态添加的元素

    1. 使用 on()方法        本质上使用了事件委派,将事件委派在父元素身上     自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...

  6. Percona-Toolkit学习之安装和配置

    http://blog.chinaunix.net/uid-26446098-id-3390779.html

  7. Homebrew-macOS缺失的软件包管理器（简称brew）

    [简介] brew又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件,只需要一个简单的命令,非常方便 [遇到的问题] 在真正了解软件包管理工具之前,一直是 ...

  8. 狗日的rem

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  9. sublime在高分辨率屏幕下，左侧边栏字体问题

    因为新的笔记本是1920*1080分辨率的屏幕,在打开sublime的时候,侧边栏的文件夹名字会变得很小,虽然很清晰,但是太小了看起来很吃力, 如下图所示 网上找了很多的方法试了好久没有成功,一天闲下 ...

  10. iOS-- UIimageView详解

    原文地址: http://blog.csdn.net/djxiaoyu_haha/article/details/40348377 // (1)创建 UIImageView *imageView = ...