博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery学习之路(一) 实现checkbox全选方法
阅读量:4615 次
发布时间:2019-06-09

本文共 2169 字,大约阅读时间需要 7 分钟。

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

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

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

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

1:为什么要写这个方法

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

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

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

3:下载地址:

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)[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);        });    });});

页面使用

                
全选one
全選
1
2
3
4
全选two
全選2
11
22
33
44

可以达到效果,如果有什么优化的地方,请大家提出,我会做的更好,谢谢大家了

转载于:https://www.cnblogs.com/xiaoshuai1992/p/jquery1.html

你可能感兴趣的文章
使用python动态特性时,让pycharm自动补全
查看>>
MySQL数据库免安装版配置
查看>>
你必知必会的SQL面试题
查看>>
html5 Canvas绘制时钟以及绘制运动的圆
查看>>
云推送注意(MSDN链接)
查看>>
Metro Style app :浏览器扩展
查看>>
linux的kernel是怎样工作的(TI_DM36X_ARM系统)(1)
查看>>
[luogu4310] 绝世好题 (递推)
查看>>
[luogu3203 HNOI2010] 弹飞绵羊 (分块)
查看>>
mui搜索框 搜索点击事件
查看>>
2016012003+陈琦+散列函数的应用及其安全性
查看>>
Android 状态栏通知Notification、NotificationManager详解
查看>>
UIApplicationDelegate协议
查看>>
Jmeter测试dubbo接口填坑
查看>>
[zz]GDB调试精粹及使用实例
查看>>
数据库的创建和删除
查看>>
最简单的三层实例【插入据
查看>>
设计模式学习笔记——Prototype原型模式
查看>>
pom.xml里有红叉报错的解决办法
查看>>
Perl last和next的用法区别
查看>>