jquery模拟多级复选框效果的简单实例


Posted in Javascript onJune 08, 2016

今天又次体会到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);
        }

以上这篇jquery模拟多级复选框效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
Koa 使用小技巧(小结)
Oct 22 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 #Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 #Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 #Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 #Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 #Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 #Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 #Javascript
You might like
php常用ODBC函数集(详细)
2013/06/24 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
很可爱的输入框
2008/08/03 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
理解javascript中的MVC模式
2016/01/28 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
进一步探究Python的装饰器的运用
2015/05/05 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python打造爬虫代理池过程解析
2019/08/15 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
舞蹈比赛获奖感言
2014/02/04 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
安全责任书范本
2014/04/15 职场文书
中学教师师德承诺书
2014/05/23 职场文书
公司活动总结范文
2014/07/01 职场文书
化验室岗位职责
2015/02/14 职场文书
中学社团活动总结
2015/05/07 职场文书
环保建议书作文400字
2015/09/14 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers