Jquery 实现checkbox全选方法


Posted in Javascript onJanuary 28, 2015

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

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

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

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

1:为什么要写这个方法

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

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

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

3:文件,下面是我实现的js,保存为xs_checkbox_all.js

$(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)[0].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" />

        1<br />

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

        2<br />

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

        3<br />

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

        4<br />

    </div>

    </fieldset>

    <fieldset>

        <legend>全选two</legend>

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

        全选2

    <div>

        <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 />

    </div>

    </fieldset>

</body>

</html>

可以达到效果,如果有什么优化的地方,请大家提出,我会做的更好,谢谢大家了,以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
详解VUE调用本地json的使用方法
May 15 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
AngularJS实现表单验证
Jan 28 #Javascript
jQuery制作简单柱状图实例
Jan 28 #Javascript
js分页工具实例
Jan 28 #Javascript
js制作简易年历完整实例
Jan 28 #Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 #Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 #Javascript
JavaScript插件化开发教程 (四)
Jan 27 #Javascript
You might like
PHP实现图片自动清理的方法
2015/07/08 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP学习记录之数组函数
2018/06/01 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
document.forms用法示例介绍
2014/06/26 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
说一说Python logging
2016/04/15 Python
python生成二维码的实例详解
2017/10/29 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python Process多进程实现过程
2019/10/22 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
初中三年毕业生的自我评价分享
2014/02/14 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
歌唱比赛主持词
2014/03/18 职场文书
捐书活动总结
2014/05/04 职场文书
股票投资建议书
2014/05/19 职场文书
超市店庆活动方案
2014/08/31 职场文书
党员检讨书
2014/10/13 职场文书
党员民主评议个人总结
2014/10/20 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
小学教代会开幕词
2016/03/04 职场文书
SQL写法--行行比较
2021/08/23 SQL Server
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers