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 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
JavaScript数组常用方法
Mar 02 Javascript
jQuery each函数源码分析
May 25 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 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
oracle资料库函式库
2006/10/09 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
初品cakephp 入门基础
2012/02/16 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
django文档学习之applications使用详解
2018/01/29 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
税务干部鉴定材料
2014/02/11 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
就职演讲稿范文
2014/05/19 职场文书
小学四年级学生评语
2014/12/26 职场文书
就业推荐表院系意见
2015/06/05 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android