<!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. 【坐标变换】【二维偏序】【线段树】Gym - 100820G - Racing Gems

    题意:第一象限有n个点,你从x正半轴任选一个位置出发,vy恒定,vx可以任意变化,不过只能在-vy/r到vy/r之间变化,问你最多能经过多少个点. 暴力dp是n^2,不可取. 注意到,一个点,所能到达 ...

  2. Mac 下解压NDK .bin文件

    Mac Android Studio 开发NDK,首先下载NDK文件----->android-ndk-r10d-darwin-x86_64.bin 1.打开终端获取文件权限 chmod a+x ...

  3. Activity研究

    ActivityManagerService 业务的整个逻辑关系被各种复杂的数据结构包裹着,因此对ActivityManagerService 的分析主要就是对各种数据结构的分析,明白了这些数据结构, ...

  4. bzoj 1086 树分块

    将树分成一些块,做法见vfleaking博客. /************************************************************** Problem: 108 ...

  5. bzoj 4439: [Swerc2015]Landscaping -- 最小割

    4439: [Swerc2015]Landscaping Time Limit: 2 Sec  Memory Limit: 512 MB Description FJ有一块N*M的矩形田地,有两种地形 ...

  6. cordova安卓手机<a href="tel:xxx"></a>无法进入拨号界面问题

    在使用cordova开发跨平台APP时,可能会用到点击某个按钮进入拨号界面的问题,HTML中的a标签提供了这个功能,但在部分安卓手机中却没有作用,点击没有反应,解决的方法如下:(在config.xml ...

  7. TortoiseSVN 修改密码

    在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么以后就不用每次都输入一遍用户名密码了. 不过,如果 ...

  8. React-Native调用支付宝，微信

    https://www.pingxx.com/docs/downloads Ping++ 是为移动端应用以及 PC 网页量身打造的下一代支付系统,通过一个 SDK 便可以同时支持移动端以及 PC 端网 ...

  9. Android TextView 显示HTML加图片

    TextView显示网络图片,我用android2.3的系统,可以显示图片出来,并且如果图片比较大,应用会卡的现象,肯定是因为使用主线程去获取网络图片造成的,但如果我用android4.0以上的系统运 ...

  10. 【mysql】mysql统计查询count的效率优化问题

    mysql统计查询count的效率优化问题 涉及到一个问题 就是 mysql的二级索引的问题,聚簇索引和非聚簇索引 引申地址:https://www.cnblogs.com/sxdcgaq8080/p ...