昨天早上有写到怎么利用Jquery实现全选

根据大家的意见对程序中一些写法不好的地方进行了修改，也是本人水平有限，存在各种考虑不到的地方。

文章最后我提出了一个问题，要写一个通用的方法来调用，于是就有了现在的这篇文章，晚上回到家，我就写出了效果

下面的例子可以供大家讨论学习，如果觉得不错也可以直接应用到项目中。

1：为什么要写这个方法

网上实现一句话全选全不选的有很多，但是好像都忽略了一个问题，全选的checkbox可以控制下面的子checkbox，但是下面的子checkbox应该也可以控制上面的全选，这样就有了我的这个方法。

2：开发过程：要实现通用就要解决2个问题，怎么分组，怎么判断组里面哪个checkbox为全选，我想了想，觉得用name分组可以，

用class来判断是否是需要全选的checkbox组。先找到所有class为需要全选的，再找出name属性，根据name属性就可以找到其他的子checkbox,只要找到元素就可以进行操作了

3：下载地址：实现checkbox全选方法.zip

4：文件，下面是我实现的js，保存为xs_checkbox_all.js

//****************************************************************************************

//作者：轻狂书生

//博客地址：http://www.cnblogs.com/xiaoshuai1992

//create: 2014/1/15

//功能：实现checkbox的智能全选

//使用方法：引用jquery,设置要全选的checkbox 组name一样，全选的checkbox设置class为下面变量xsChk

//*****************************************************************************************

$(document).ready(function () {

    var xsChk = "xsChk";//定义的样式

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

    $(xsChkAll).each(function () {

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

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

        $(this).click(function () {

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

        })

        var xschk = $(this);

        $(name).click(function () {

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

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

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

            if (IAll != IChk) {

                isAllChecked = false;

            }

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

        });

    });

});

页面使用

<!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 src="xs_checkbox_all.js" type="text/javascript"></script>

    <fieldset>

        <legend>全选one</legend>

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

        全選

    <div>

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

        <br />

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

        <br />

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

        <br />

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

        <br />

    </div>

    </fieldset>

    <fieldset>

        <legend>全选two</legend>

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

        全選2

    <div>

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

        <br />

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

        <br />

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

        <br />

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

        <br />

    </div>

    </fieldset>

</body>

</html>

可以达到效果，如果有什么优化的地方，请大家提出，我会做的更好,谢谢大家了

Jquery学习之路(一) 实现checkbox全选方法的更多相关文章

  1. Jquery学习笔记（4）--checkbox全选反选

    可能有浏览器兼容性,注意html里的checked是一个属性,存在就默认选中. <!DOCTYPE html> <html lang="en"> <h ...

  2. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  3. checkbox全选，反选，取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  4. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  5. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

  6. jQuery实现CheckBox全选、全不选

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

  7. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  8. jQuery设置checkbox全选（区别jQuery版本）

    jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...

  9. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

随机推荐

  1. PJSIP-PJLIB（samples) (the usage of the pjlib lib) (eg:string/I/O)

    Here are some samples about  PJLIB! PJLIB is the basic lib of PJSIP, so we need master the lib first ...

  2. 【Linear Models for Binary Classification】林轩田机器学习基石

    首先回顾了几个Linear Model的共性:都是算出来一个score,然后做某种变化处理. 既然Linear Model有各种好处(训练时间,公式简单),那如何把Linear Regression给 ...

  3. 【Java】Java JDK 安装及环境配置

    安装包下载: Java Platform (JDK) 11 https://www.oracle.com/technetwork/java/javase/downloads/index.html 安装 ...

  4. python-isinstance,issubclass

    1 #当存在继承关系时,两个类中存在相同的方法,如何执行父类的方法,通过super 2 class C1: 3 def f1(self): 4 print('c1.f1') 5 6 7 class C ...

  5. python练习题及实现--文件处理、date日期

    练习题作者:Vamei 出处:http://www.cnblogs.com/vamei http://www.cnblogs.com/vamei/archive/2012/07/19/2600135. ...

  6. Buildroot ipa image

    参考: https://github.com/csmart/ironic-python-agent/tree/buildroot/imagebuild/buildroot#buildroot-iron ...

  7. Visual C++ 图像处理类库CxImage源代码

    说明:VC++ 图像处理类库CxImage源代码,CxImage是一个可以用于MFC 的C++类,可以打开,保存,显示,转换各种格式的图像文件,比如BMP, JPEG, GIF, PNG, TIFF, ...

  8. 电脑显卡4种接口类型：VGA、DVI、HDMI、DP

    电脑显卡全称显示接口卡(Video card,Graphics card),又称为显示适配器(Video adapter),显示器配置卡简称为显卡,是个人电脑最基本组成部分之一.对于显卡接口类型,主要 ...

  9. sqlalchemy presto 时间比较

    大数据统计时,需要计算开仓订单减掉经纪商时间差,等于n 小时 或 星期几的订单. presto sql语句如下: select sum(profit) from t_table where open_ ...

  10. [SP10707]COT2 - Count on a tree II

    题目大意:有一棵$n$个节点的树,第$i$个点有一个颜色$C_i$,$m$组询问,每次问$x->y$的路径上有多少种颜色 题解:树上莫队,把树按欧拉序展开成一条链,令第$i$个节点第一次出现在序 ...