昨天早上有写到怎么利用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. 《Cracking the Coding Interview》——第11章：排序和搜索——题目4

    2014-03-21 21:28 题目:给定一个20GB大小的文本文件,每一行都是一个字符串.请设计方法将这个文件里的字符串排序. 解法:请看下面的注释. 代码: // 11.4 Given a fi ...

  2. 【vim环境配置】详细实录

    [写在前面] 以下的所有内容主要参照: https://github.com/yangyangwithgnu/use_vim_as_ide . 原blog作者写的非常用心,建议大家都去看看.(个人觉得 ...

  3. 在SqlServer中通过SQL语句实现树状查询

    CREATE PROCEDURE [dbo].[GetTree] @Id int AS BEGIN with cte as ( as lvl from Entity where Id = @Id un ...

  4. GLIBCXX3.4.21 not find

    在执行世界杯的二进制代码和安装keepaway中会遇到GLIBCXX3.4.21 not find的问题,其解决办法就是升级安装GCC. 一.首先查看当前gcc版本 $ strings /usr/li ...

  5. Python作业--登录接口

    作业需求: 编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 实现思路: 1.从文件获取用户名密码 2.判断是否在黑名单中 3.验证用户名密码 成功:输出认证成功 错误:判断验证次 ...

  6. Python学习-day20 django进阶篇

    Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...

  7. 条件随机场(Conditional random field)

    条件随机场真是把我给折磨坏了啊,本以为一本小小的<统计学习方法>攻坚剩下最后一章,心情还是十分愉悦的,打算一口气把它看完,结果真正啃起来真是无比的艰难啊,每一句对我都好像是天书一般,怎么这 ...

  8. awk学习笔记

    1. 数据格式 id1,n1 id2,n2 ... 要对每个id进行一个n的加和 cat file1 | awk -F"," '{if(n[$1]>0){n[$1]=n[$1 ...

  9. 软工实践 - 第十一次作业 Alpha 冲刺 （3/10）

    队名:起床一起肝活队 组长博客:https://www.cnblogs.com/dawnduck/p/9972061.html 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去 ...

  10. HDU - 3072 Intelligence System

    题意: 给出一个N个节点的有向图.图中任意两点进行通信的代价为路径上的边权和.如果两个点能互相到达那么代价为0.问从点0开始向其余所有点通信的最小代价和.保证能向所有点通信. 题解: 求出所有的强连通 ...