昨天早上有写到怎么利用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. sourceInsight *** more bytes are required

    现象:用sourceinsight修改的文件无法保存,提示 No enough space to save "XXX", xxx more bytes are required. ...

  2. Java架构师必会的技能

    Java架构师必会的技能 我把它分为了五大专题 工程化专题 工程化专题 git git安装使用 git日常使用:fetch/pull/push/revert/rebase git分支管理git flo ...

  3. 《Cracking the Coding Interview》——第9章：递归和动态规划——题目3

    2014-03-20 03:01 题目:给定一个已按升序排序的数组,找出是否有A[i] = i的情况出现. 解法1:如果元素不重复,是可以严格二分查找的. 代码: // 9.3 Given a uni ...

  4. cookie不能删除

    cookie不仅仅包含一个键值对,还包含域 domain  路径path, 一般domain是请求的地址 www.baidu.com/news.html 那domain就是www.baidu.com ...

  5. JFinal Template Engine 使用

    官方文档:JFinal Template Engine 文档

  6. TO_CHAR 和 TO_DATE的一些用法总结

    对于初学者来说,日期处理那快一向是问题的集中地.今天刚刚看了个案例,将的就是ORACLE日期处理中的错误,其关键原因,就是TO_CHAR 和TO_DATE的用法不清晰,,事实上,这两个东西也特别容易混 ...

  7. yum常规操作的基本用法

    比如说,我想用nano编辑器的,发现没有安装, 这个时候你就可以用$ yum search nano 查询nano属于哪个安装包下. 发现就有nano这个安装包, 这个时候安装一下这个安装包,$ su ...

  8. linux服务器基本安全配置手册

    转:忘了在哪转的,直接复制到笔记里了,贴出来分享 假如你想要搭建一个Linux服务器,并且希望可以长期维护的话,就需要考虑安全性能与速度等众多因素.一份正确的linux基本安全配置手册就显得格外重要. ...

  9. Java系列学习说明

    最近要回顾以前的开发知识了,每天一个案例,争取早日成为一名合格的程序猿,现在就是猴娃子级别的.

  10. 使用pl/sql在oracle中新建表和对应序列

    1.登录后再Table节点右键新建表: 开始编辑表结构 列 键约束 检查约束 查看sql,没问题的话点击应用,创建表 2.创建序列sequence,在Sequence节点右键新建 填写内容 查看sql ...