模拟多级复选框效果的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入门基础之私有变量
Feb 23 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
js实现星星打分效果
Jul 05 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学习 函数 课件
2008/06/15 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
运动会横幅标语
2014/06/17 职场文书
外国人来华邀请函
2015/01/31 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL