模拟多级复选框效果的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 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
跟老齐学Python之Python安装
2014/09/12 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
AJAX的优缺点都有什么
2015/08/18 面试题
乡镇庆八一活动方案
2014/02/02 职场文书
运动会通讯稿150字
2014/02/15 职场文书
探亲假请假条
2014/04/11 职场文书
青春励志演讲稿
2014/04/29 职场文书
关于环保的标语
2014/06/13 职场文书
租房协议书范文
2014/08/20 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
房屋所有权证明
2015/06/19 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers