JQuery实现简单的复选框树形结构图示例【附源码下载】


Posted in jQuery onJuly 16, 2019

本文实例讲述了JQuery实现简单的复选框树形结构图。分享给大家供大家参考,具体如下:

JQuery实现简单的复选框树形结构图示例【附源码下载】

这是自己写的简单树形结构图,实现的功能有:

1.最左边的按钮实现子目录的隐藏和显示

2.点击父节点的复选框选中后,父节点下的所有的子节点也选中;父节点未选中,则下面的所有的子节点也取消选中(全选和全不选)

3.选中一个子节点时相应的父节点也选中;当所有的子节点都没有选中时,父节点也取消选中

这是实现的最简单的功能。下面来具体的谈谈具体的实现:

1.引入库

所有的这些操作都是通过JQuery来实现的,所以首先要引入JQuery库,可以到官网下载JQuery库,也可以通过CDN的方式来引用,这里我是通过CDN的方式引用的:

<!-- 引入JQuery -->
<script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>

2.子目录的隐藏和显示

这里我只是做了一个简单的,可能看起来不是很美观,我的最左边放的是一个button按钮,并且没有经过CSS美化,所以看起来比较丑,不过这都不是重点,重点是我们功能的实现,由于我的代码比较简单并且注释我也写的比较详细了,所以这里我就不做过多的介绍,直接贴代码:

<!-- 切换子目录隐藏或显示的按钮 -->
<div class="div_inline"><input type="button" value="-" class="tree_node_toggle_button"></div>

上面是按钮,下面是按钮的点击事件:

// 为所有的切换按钮添加点击事件
$(".tree_node_toggle_button").click(function () {
  // 获取需要隐藏或显示的节点
  var $toggle_node = $(this).parent().next().find(".tree_node_child");
  $toggle_node.toggle(); // 切换隐藏或显示
  // 切换按钮的显示
  if($toggle_node.is(":visible")){
    $(this).val("-");
  }else{
    $(this).val("+");
  }
});

简单说明一下逻辑就是,点击按钮后,切换子目录的隐藏或显示,然后根据子目录的隐藏或显示状态,来重新设置按钮的显示'+'或者'-'

3.全选/全不选

// 为所有的父节点添加点击事件
$(".tree_node_parent_checkbox").click(function(){
    // 获取父节点是否选中
    var isChange = $(this).prop("checked");
    if(isChange){ // 如果选中,则父节点下的所有的子节点都选中
      // 获取当前checkbox节点的兄弟节点下的所有的checkbox子节点选中
      $(this).next().find(".tree_node_child_checkbox").prop("checked", true);
    }else{ // 未选中,取消全选
      // 获取当前checkbox节点的兄弟节点下的所有的checkbox子节点选中
      $(this).next().find(".tree_node_child_checkbox").removeAttr("checked");
    }
});

这里特别注意一下,切换checkbox的选中要用prop()方法,不能用attr(),如果用attr()首次是不能出现我们需要的效果的。关于prop和attr的区别可以去官网查看prop介绍JQuery prop 。

4.选中子节点后父节点的相应变化状态

// 为所有的子节点添加点击事件
$(".tree_node_child_checkbox").click(function () {
    // 获取选中的节点的父节点下的所有子节点选中的数量
    var length = $(this).parent().find(".tree_node_child_checkbox:checked").length;
    // 判断当前结点是否选中
    if($(this).prop("checked")){ // 选中
      // 如果当前节点选中后,所有的选中节点数量1,选中父节点
      if(length == 1){
        // 选中父节点
        $(this).parent().prev().prop("checked", true);
      }
    }else{ // 节点未选中
      if(length == 0){
        // 取消父节点的选中状态
        $(this).parent().prev().removeAttr("checked");
      }
    }
});

主要的代码就是这么多,其实也没什么复杂的。

完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
You might like
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
深入密码加salt原理的分析
2013/06/06 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
python 弧度与角度互转实例
2020/04/15 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
会计系毕业个人自荐信格式
2013/09/23 职场文书
电大毕业生自我鉴定
2013/11/10 职场文书
煤矿班组长的职责
2013/12/25 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
森林防火标语
2014/06/23 职场文书
施工安全保证书
2015/05/09 职场文书