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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
Jquery-data的三种用法
Apr 18 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery实现图片放大镜效果
Dec 23 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
Python struct.unpack
2008/09/06 Python
python计算时间差的方法
2015/05/20 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python编写俄罗斯方块
2020/03/13 Python
Python-openCV开运算实例
2020/07/05 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
EJB的激活机制
2013/10/25 面试题
商场促销活动方案
2014/02/08 职场文书
学生党员公开承诺书
2014/05/28 职场文书
工厂车间标语
2014/06/19 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
python读取mnist数据集方法案例详解
2021/09/04 Python