模拟多级复选框效果的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 相关文章推荐
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
AngularJS手动表单验证
Feb 01 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 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
基于PHPExcel的常用方法总结
2013/06/13 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python使用正则筛选信用卡
2019/01/27 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
使用python实现kNN分类算法
2019/10/16 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
法制宣传标语
2014/06/23 职场文书
班级心理活动总结
2014/07/04 职场文书
反四风对照检查材料
2014/09/22 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python