模拟多级复选框效果的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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python splitlines使用技巧
2008/09/06 Python
简单使用Python自动生成文章
2014/12/25 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
培训自我鉴定
2014/01/31 职场文书
网络书店创业计划书
2014/02/07 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
python实现图片批量压缩
2021/04/24 Python
如何用JS实现简单的数据监听
2021/05/06 Javascript
JavaScript原型链详解
2021/11/07 Javascript
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript