模拟多级复选框效果的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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
CSDN轮换广告图片轮换效果
Mar 27 Javascript
Stop SQL Server
Jun 21 Javascript
Javascript 面向对象特性
Dec 28 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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网上调查系统
2006/10/09 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
python机器学习实战之树回归详解
2017/12/20 Python
python 除法保留两位小数点的方法
2018/07/16 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
AOP的定义以及作用
2013/09/08 面试题
个人自我评价分享
2013/12/20 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
给全校老师的建议书
2014/03/13 职场文书
《赶海》教学反思
2014/04/20 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
获奖感言怎么写
2015/07/31 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
Android Rxjava3 使用场景详解
2022/04/07 Java/Android