模拟多级复选框效果的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 定义初始化数组函数
Sep 07 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
vue-router的两种模式的区别
May 30 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
用PHP实现图象锐化代码
2007/06/14 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
学习Node.js模块机制
2016/10/17 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
js实现随机点名
2021/01/19 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
浅谈Python中的继承
2020/06/19 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
出国签证在职证明
2014/01/16 职场文书
《画》教学反思
2014/04/14 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python