一个很简单jquery复选框树形结构，点击父节点，子节点全部选中（全部不选中），只要有一个子节点处于选中的状态，父节点就处于选中的状态,分别给父节点和子节点点击事件，判断当前是否处于选中的状态，再进行处理，最后的结果如下图：
css:
.div_inline {
display:inline;
}
/* 设置子节点属性 */
.tree_node_child {
margin-left:50px;
}
html:
<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" value="高分一号" name="gf">高分一号
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox" value="PMI1">PMI1<br>
<input type="checkbox" class="tree_node_child_checkbox" value="PMI2">PMI2<br>
<input type="checkbox" class="tree_node_child_checkbox" value="PMI3">PMI3<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" value="高分二号" name="gf">高分二号
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox" value="PMI1">PMI1<br>
<input type="checkbox" class="tree_node_child_checkbox" value="PMI2">PMI2<br>
<input type="checkbox" class="tree_node_child_checkbox" value="PMI3">PMI3<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" value="高分三号" name="gf">高分三号
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox" value="全部">全部<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" value="高分四号" name="gf">高分四号
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox" value="全部">全部<br>
</div>
</div>
</div>
</div>
js：
// 页面加载完成后调用
$(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");
$(this).next().find(".tree_node_child_checkbox").prop("checked",false);
}
});
// 为所有的子节点添加点击事件
$(".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");
$(this).parent().prev().prop("checked",false)
}
}
});
// 为所有的切换按钮添加点击事件
$(".tree_node_toggle_button").click(function () {
// 获取需要隐藏或显示的节点
var $toggle_node = $(this).parent().next().find(".tree_node_child");
$toggle_node.toggle(); // 切换隐藏或显示
// 切换按钮的显示
if($toggle_node[0].style.display=="none"){
$(this).val("+");
}else{
$(this).val("-");
}
});
});
