模拟多级复选框效果的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 字符串乘法
Aug 20 Javascript
Js 随机数产生6位数字
May 13 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
Node.js编码规范
Jul 14 Javascript
js 操作符汇总
Nov 08 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
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
Destoon实现多表查询示例
2014/08/21 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
jquery 获取json数据实现代码
2009/04/27 Javascript
Javascript 二维数组
2009/11/26 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
python使用Tesseract库识别验证
2018/03/21 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
解决python 找不到module的问题
2020/02/12 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
怎样写辞职信
2015/02/27 职场文书
大学生逃课检讨书
2015/05/04 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python