<div class="tree_content">
<div class="tree_node">
<div class="div_inline"><input type="button" value="-" class="tree_node_toggle_button"></div>
<div class="div_inline tree_node_parent">
<input type="checkbox" class="tree_node_parent_checkbox">父节点1
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox">子节点1<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点2<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点3<br>
</div>
</div>
</div>
<div class="tree_node">
<!-- 切换子目录隐藏或显示的按钮 -->
<div class="div_inline"><input type="button" value="-" class="tree_node_toggle_button"></div>
<div class="div_inline tree_node_parent">
<input type="checkbox" class="tree_node_parent_checkbox">父节点2
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox">子节点1<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点2<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点3<br>
</div>
</div>
</div>
<div class="tree_node">
<div class="div_inline"><input type="button" value="-" class="tree_node_toggle_button"></div>
<div class="tree_node_parent div_inline">
<input type="checkbox" class="tree_node_parent_checkbox">父节点3
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox">子节点1<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点2<br>
<input type="checkbox" class="tree_node_child_checkbox">子节点3<br>
</div>
</div>
</div>
</div>
 .div_inline {
display:inline;
}
/* 设置子节点属性 */
.tree_node_child {
margin-left:50px;
}
// 页面加载完成后调用
$(function(){
// 为所有的父节点添加点击事件
$(".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");
}
});
// 为所有的子节点添加点击事件
$(".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");
}
}
}); // 为所有的切换按钮添加点击事件
$(".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("+");
}
});
});

jquery树形结构的更多相关文章

  1. jQuery 树形结构

    强大的jquery.ztree树形菜单插件支持多种树形菜单导航 http://www.17sucai.com/pins/2259.html 演示: http://www.17sucai.com/pin ...

  2. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

  3. 5JS树形结构菜单和jQuery版

    第一版JS版HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  4. salesforce 零基础学习(七十)使用jquery table实现树形结构模式

    项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...

  5. salesforce 零基础学习(七十)使用jquery tree实现树形结构模式

    项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...

  6. 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件

    看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...

  7. 用jquery-easyui中的combotree实现树形结构的选择

    用jquery-easyui中的combotree实现树形结构的选择 需求:实现一个树形节点的选择,要求默认父节点都折叠,父节点前的checkbox不显示,子节点显示checkbox,且父节点不可选择 ...

  8. MVC3+EF4.1学习系列(十)----MVC+EF处理树形结构

    通过前几篇文章 我们处理了 一对一, 一对多,多对多关系 很好的发挥了ORM框架的做用 但是 少说了一种 树形结构的处理, 而这种树形关系 我们也经常遇到,常见的N级类别的处理, 以及经常有数据与类别 ...

  9. CSS实现树形结构 + js加载数据

    看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: li { position: relative; padding: 5px 0; margin:0 ...

随机推荐

  1. Kong06-Kong 的集群怎么用

    Kong 集群允许您通过添加更多的机器来处理更多的传入请求来横向扩展系统.它们将共享相同的配置,因为它们指向相同的数据库.指向相同数据存储的 Kong 节点将属于相同的 Kong 集群. 您需要在Ko ...

  2. ApplicationContext refresh 过程及一些重要的 processor 解析

    回顾 上文 其实我们已经实现了一个简单的 BeanFactory 它具的功能有 注册 Bean 到容器,通过限定名获取 Bean 可以拦截 Bean 初始化前后的处理 可以在 Bean 属性注入后和即 ...

  3. 使用Typescript重构axios(二十五)——文件上传下载进度监控

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  4. 基于 H5 Canvas 实现楼宇自控系统

    前言 楼宇自控是指楼宇中电力设备,如电梯.水泵.风机.空调等,其主要工作性质是强电驱动.通常这些设备是开放性的工作状态,也就是说没有形成一个闭环回路.只要接通电源,设备就在工作,至于工作状态.进程.能 ...

  5. 『题解』洛谷P2170 选学霸

    更好的阅读体验 Portal Portal1: Luogu Description 老师想从\(N\)名学生中选\(M\)人当学霸,但有\(K\)对人实力相当,如果实力相当的人中,一部分被选上,另一部 ...

  6. Linux基础指令--韩顺平老师课程笔记

    一.vi和vim编辑器 ①.三种模式 所有的 Linux 系统都会内建 vi 文本编辑器.vim 具有程序编辑的能力,可以看做是 vi 的增强版本,可以主动的以字体颜色辨别语法的正确性,方便程序设计. ...

  7. 最适合Java开发者的一本书和一软件

    一书-<Java编程思想> 一软件-IntelliJ IDEA Java自学是否可以成功,答案显而易见,可以. 自学Java关键看自己是否有毅力.是否有恒心. 自学Java 自学Java不 ...

  8. freeradius简单配置

    1.安装freeradius sudo apt-get update sudo apt-get install freeradius 2.配置client.conf vim /etc/freeradi ...

  9. [LINQ2Dapper]最完整Dapper To Linq框架(四)---Linq和SQL并行使用

    目录 [LINQ2Dapper]最完整Dapper To Linq框架(一)---基础查询 [LINQ2Dapper]最完整Dapper To Linq框架(二)---动态化查询 [LINQ2Dapp ...

  10. WordPress 添加title中的logo

    WordPress 添加title中的logo <!--网页标题左侧显示--> <link rel="icon" href="/favicon.png& ...