昨天早上有写到怎么利用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. laravel5.5入口文件分析

    入口文件 public/index.php 1.加载composer的自动加载器 require __DIR__.'/../vendor/autoload.php'; 自动加载,不用再各种requir ...

  2. 《Cracking the Coding Interview》——第2章：链表——题目6

    2014-03-18 02:41 题目:给定一个带有环的单链表,找出环的入口节点. 解法1:用hash来检测重复节点肯定是容易想而且效率也高的好办法. 代码: // 2.6 You have a ci ...

  3. Python 模块：random 随机数生成

    Python中的random模块用于生成随机数. 使用该模块之前需要 import random 几个常用的函数用法: 1.random.random 函数原型: random.random() 用于 ...

  4. Appium与python自动测试环境及demo详解

    App--UI自动化这种高端的名词已经被越来越多的人所高呼,可是从实际角度来讲,个人觉得还是有点鸡肋,不如接口自动化敏捷度高,工作量 也是接口自动化的好几倍.但是,[划重点了]  在技术时代中,作为测 ...

  5. python-使用pip安装第三方库报UnicodeDecodeError: 'utf8' codec can't decode byte 0xcb in position 7: invalid continuation byte 错误解决方案

    在python 的安装目录下找到Lib\ntpath.py文件,找到def join(path, *paths):方法,添加如下两行语句: reload(sys) sys.setdefaultenco ...

  6. 【志银】Dev-Cpp配置OpenGL图形库（成功版本：Dev-Cpp 5.7.1 MinGW 4.8.1）

    ★配置前须知:Dev-Cpp自带OpenGL的使用和OpenGL简介 (附Dev-Cpp下载地址:http://sourceforge.net/projects/orwelldevcpp/?sourc ...

  7. GCC 7.3 for Windows

    GCC 6.1x Compilers 下载地址1: Mingw gcc 6.30下载 这个是某微软员工编译的版本 MinGW is a port of GCC to Windows. It is fr ...

  8. php学习ing

    cmd运行,表示在本地d:/php/workspace下文件映射在127.0.0.1的8080端口下,-S -t不要忘记 php -S 127.0.0.1:8080 -t E:\class_manag ...

  9. iOS 实现设备应用之间的相互切换

    今天突发奇想,想做个应用之间能够切换的demo. 前提条件是,你得知道对应应用程序的URL Scheme.URL Scheme不一定和bundle id相同,但是,一定要是一致的. [[UIAppli ...

  10. nyoj 题目737 合并石子(一)

    石子合并(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述     有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的 ...