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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jquery实现简易验证插件封装
Sep 13 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
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
通过代码实例了解Python sys模块
2020/09/14 Python
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
自荐信格式的六要素
2013/09/21 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
党风廉政承诺书
2014/03/27 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
经销商会议开幕词
2016/03/04 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers