<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形结构图</title>
<style>
.div_inline{
display: inline;
}
/* 设置子节点属性 */
.tree_node_child{ margin-left: 50px;}
</style>
<!-- 引入JQuery -->
<script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script>
// 页面加载完成后调用
$(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("+");
}
});
});
</script>
</head>
<body>
<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>
</body>
</html>
- 1
- 2
前往页