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 Plupload上传插件的使用
Apr 19 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery常用选择器详解
Jul 17 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery实现雪花飘落效果
Aug 02 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数组的概述及分类与声明代码演示
2013/02/26 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Python安装第三方库的3种方法
2015/06/21 Python
python实现多线程的两种方式
2016/05/22 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Django 多环境配置详解
2019/05/14 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
活动总结新闻稿
2014/08/30 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
关于的python五子棋的算法
2022/05/02 Python
vue中data里面的数据相互使用方式
2022/06/05 Vue.js