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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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
配置支持SSI
2006/11/25 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP代码优化的53个细节
2014/03/03 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python第三方库的安装方法总结
2016/06/06 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python线程池如何使用
2020/05/28 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
PHP如何自定义函数
2016/09/16 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
教学实验楼管理制度
2014/02/01 职场文书
卫生巾广告词
2014/03/18 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL