模拟多级复选框效果的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学习随笔(使用window和frame)的技巧
Mar 08 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
js切换div css注意的细节
Dec 10 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
vue-router为激活的路由设置样式操作
Jul 18 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中一个完整表单处理实现代码
2011/11/10 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
vue按需加载实例详解
2019/09/06 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python常用模块介绍
2014/11/21 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python列表list操作相关知识小结
2020/01/29 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
2016大一新生军训感言
2015/12/08 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
Golang日志包的使用
2022/04/20 Golang