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

前端  /  管理员 发布于 5年前   406

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

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

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

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

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

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

1.引入库

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

2.子目录的隐藏和显示

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

上面是按钮，下面是按钮的点击事件：

// 为所有的切换按钮添加点击事件$(".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操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

• jQuery 树形结构的选择器
• jQuery EasyUI结合zTree树形结构制作web页面
• jquery实现自定义树形表格的方法【自定义树形结构table】
• jQuery 利用ztree实现树形表格的实例代码
• jQuery ztree实现动态树形多选菜单
• jQuery树形控件zTree使用小结
• jquery树形菜单效果的简单实例
• jquery实现树形菜单完整代码
• 推荐8款jQuery轻量级树形Tree插件
• jquery ztree实现下拉树形框使用到了json数据
• json+jQuery实现的无限级树形菜单效果代码