模拟多级复选框效果的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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php实现的农历算法实例
2015/08/11 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
JS实现放大镜效果
2020/09/21 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
简单实现python进度条脚本
2017/12/18 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
python属于解释语言吗
2020/06/11 Python
python中的yield from语法快速学习
2020/11/06 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
测试工程师职业规划书
2014/02/06 职场文书
教师党员个人整改措施
2014/10/27 职场文书
芙蓉镇观后感
2015/06/10 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
高一作文之乐趣
2019/11/21 职场文书
室外天线与收音机天线杆接合方法
2022/04/05 无线电