模拟多级复选框效果的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做拖动布局的思路
May 31 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
Validform表单验证总结篇
Oct 31 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
AJAX学习笔记
May 18 Javascript
React如何创建组件
Jun 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
Terran热键控制
2020/03/14 星际争霸
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue中轮训器的使用
2019/01/27 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
linux下python抓屏实现方法
2015/05/22 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
浅谈Python中的私有变量
2018/02/28 Python
python3判断url链接是否为404的方法
2018/08/10 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
django实现日志按日期分割
2020/05/21 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
委托书模板
2014/04/04 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年评职称工作总结
2014/11/20 职场文书
安全生产培训心得体会
2016/01/18 职场文书
创业计划书之酒吧
2019/12/02 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL