模拟多级复选框效果的jquery代码


Posted in Javascript onAugust 13, 2013

今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了。

我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升。

主要分享下jquery的这个效果的实现。代码块分两块:

一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中。这人很好做,代码如下:

evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle是点击的复选框

二是当前复选框的父框根据当前框的兄弟是否全选中来决定父框是否选中,再继续往上看父框的父框等。
当全选中时这里的实现使用parents来得到所有的父框,对每一个的操作结合each来完成。

当非全选中时父框依次失去被选中。代码如下:

if (evtEle.is("input:checked")) { 
evtEle.parents(".checks").each(function () { 
!$(this).children("p").children("input:checkbox").filter(function () { 
return !this.checked; 
})[0] && $(this).prev().children("input:checkbox").attr("checked", "checked"); 
}); 
} else { 
evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false); 
}

code下载
Javascript 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
javascript实现简单页面倒计时
Mar 02 Javascript
javascript 树形导航菜单实例代码
Aug 13 #Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 #Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 #Javascript
鼠标经过显示二级菜单js特效
Aug 13 #Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 #Javascript
jquery固定底网站底部菜单效果
Aug 13 #Javascript
js 三级关联菜单效果实例
Aug 13 #Javascript
You might like
php构造函数的继承方法
2015/02/09 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
php读取本地json文件的实例
2018/03/07 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
微信小程序App生命周期详解
2018/01/31 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python生成随机验证码的两种方法
2015/12/22 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python global和nonlocal用法解析
2020/02/03 Python
keras中的卷积层&池化层的用法
2020/05/22 Python
python访问hdfs的操作
2020/06/06 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
python 如何停止一个死循环的线程
2020/11/24 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
战友聚会邀请函
2014/01/18 职场文书
2014年文员工作总结
2014/11/18 职场文书
志愿者个人总结
2015/03/03 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
创业计划书之网吧
2019/10/10 职场文书
mysql如何查询连续记录
2022/05/11 MySQL