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 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
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函数解决SQL injection
2006/10/09 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
php 修改密码实现代码
2017/05/24 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python全局变量操作详解
2015/04/14 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
对python 命令的-u参数详解
2018/12/03 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
浅析NumPy 切片和索引
2020/09/02 Python
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
广州盈通面试题
2015/12/05 面试题
大学生社会实践自我鉴定
2014/03/24 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
本科毕业生自荐信
2014/06/02 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Python基础之进程详解
2021/05/21 Python
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
实操Python爬取觅知网素材图片示例
2021/11/27 Python