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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 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 文本文件的读取效率
2012/02/10 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
webpack打包js的方法
2018/03/12 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python实现telnet服务器的方法
2015/07/10 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
运动员口号
2014/06/09 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
学生偷窃检讨书
2014/09/25 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
公司承诺书格式范文
2015/04/28 职场文书
走进毛泽东观后感
2015/06/04 职场文书
国庆阅兵观后感
2015/06/15 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js