一个很简单jquery复选框树形结构，点击父节点，子节点全部选中（全部不选中），只要有一个子节点处于选中的状态，父节点就处于选中的状态,分别给父节点和子节点点击事件，判断当前是否处于选中的状态，再进行处理，最后的结果如下图：



![QQ图片20170904160428.png](http://upload-images.jianshu.io/upload_images/7096759-21a32483afeea8ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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("-");
                                    }
                                });
                            });