Tree菜单 复选框选中控制DEMO

java 对应实体类属定义

public class AccoSysmanResource{
   
    /**
     * 资源类型
     */
    private Integer resourceType;
    
    /**
     * 权限名称
     */
    private String name;
    
    /**
     * 权限描述
     */
    private String description;
    
    /**
     * 排序
     */
    private Integer level;
   
    /**
     * 子节点
     */
    private List<AccoSysmanResource> subResource;
    
    private Integer pid;

    private Integer deleteFlag;

    private Integer pMenuId;
    
    private Date createtime;

}

jsp页面循环遍历属性结构代码

　<!-- tree_start -->

　<div class="col-md-3">
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="sour">
                        <div class="data-div">
                            <div class="row tableHeader">
                                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                  <label>
                                          <input name="checkname" type="checkbox" value="0" onclick="checkboxById(this,'biz')"/>菜单 全选
                                     </label>
                                </div>
                            </div>
                            <div class="tablebody">
                                <div id="collapseSystem" class="collapse in" aria-expanded="true">
                                
                                <!-- 第一层 start -->
                                <c:forEach items="${bizList}" var="menu" varStatus="rows">
                                    <div class="row">
                                        <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 levl3" role="button" >
                                            <c:if test="${empty menu.subResource}" var="biz_not_empty_subResource">
                                                  <span class="glyphicon glyphicon-pushpin"></span>
                                              </c:if>
                                              <c:if test="${not biz_not_empty_subResource}">
                                                  <i id="down_biz_${rows.index}" class="glyphicon glyphicon-hand-down" style="display: ${rows.index==0 ? 'none':''};"></i>
                                                  <i id="up_biz_${rows.index}" class="glyphicon glyphicon-hand-up" style="display: ${rows.index!=0 ? 'none':''};"></i>
                                              </c:if>
                                              <label>
                                                  <input name="bizMenuId" type="checkbox" value="${menu.pid}" id="biz_${rows.index}" onclick="checkboxById(this,'biz_${rows.index}_')"/>
                                                 </label>
                                                 <span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_biz_${rows.index}" aria-expanded="true" onclick="dom('biz_${rows.index}')">${menu.name}</span>
                                        </div>
                                    </div>
                                    
                                    <!-- 第二层 start -->
                                    <c:if test="${not biz_not_empty_subResource}">
                                    <div id="collapse_biz_${rows.index}" class="${rows.index==0 ? 'collapse in':'collapse'}" aria-expanded="${rows.index==0 ? 'true':'false'}">
                                    <c:forEach items="${menu.subResource}" var="m" varStatus="i">
                                        <div class="row" style="border-top:1px solid #E3E8EE;">
                                            <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 levl3">
                                                <label>
                                                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                      <input name="bizMenuId"  value="${m.pid}" type="checkbox" id="biz_${rows.index}_${i.index}" onclick="checkboxById(this,'biz_${rows.index}_${i.index}_')" />
                                                      <span role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true"  href="#collapse_biz_${rows.index}_${i.index}" >
                                                      <c:if test="${empty m.subResource}" var="biz_not_empty_m_subResource">
                                                      |--${m.name}
                                                      </c:if>
                                                      <c:if test="${not biz_not_empty_m_subResource}">
                                                          <span class="glyphicon glyphicon-triangle-bottom"></span>${m.name}
                                                      </c:if>
                                                      </span>
                                                     </label>
                                            </div>
                                        </div>
                                        
                                        <!-- 第三层start -->
                                        <c:if test="${not biz_not_empty_m_subResource}">
                                            <div id="collapse_biz_${rows.index}_${i.index}" class="collapse in" aria-expanded="true" >
                                            <c:forEach items="${m.subResource}" var="m2" varStatus="i3">
                                                <div class="row" style="border-top:1px solid #E3E8EE;">
                                                    <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 levl3" >
                                                        <label>
                                                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                              <input name="bizMenuId"  value="${m2.pid}" type="checkbox" id="biz_${rows.index}_${i.index}_${i3.index}" onclick="childCheckboxById(this,'biz_${rows.index}_${i.index}_${i3.index}')"  />
                                                              <span>|----${m2.name}</span>
                                                             </label>
                                                    </div>
                                                </div>
                                            </c:forEach>
                                            </div>
                                        </c:if>
                                        <!-- 第三层end -->
                                        
                                    </c:forEach>
                                    </div>
                                    </c:if>
                                    <!-- 第二层 end -->
                                    
                                </c:forEach>
                                <!-- 第一层 end -->
                               </div>
                            </div>
                            
                        </div>
                       </div>
                 </div>
              </div>
              <!-- tree_end -->

js文件（必须先导入Jquery.js 文件）

/** 全选 */
function checkboxAll(obj, cheName) {
    if ($(obj).prop("checked")){
    
        $("input[name='" + cheName + "']").prop("checked", true);
    } else {
     $("input[name='" + cheName + "']").prop("checked", false);
    }
}

/**cheId开头的Id全选*/
function checkboxById(obj, cheId){
    var parent2=cheId.substr(0,cheId.lastIndexOf('_'));
    var parent1=parent2.substr(0,parent2.lastIndexOf('_'));
    if ($(obj).prop("checked")){
        $("input[id='" + parent1 + "']").prop("checked", true);
        $("input[id^='" + cheId + "']").prop("checked", true);
    } else {
        $("input[id^='" + cheId + "']").prop("checked", false);
        var parent3=parent1+"_";
        var index=0;
        $("input[id^='"+parent3+"']:checked").each(function(){
            index++;         
        });
        if(index==0){
            $("input[id='" + parent1 + "']").prop("checked", false);
        }
    }
}
/**三级节点点击触发**/
function childCheckboxById(obj, parentCheId){
    var parent2=parentCheId.substr(0,parentCheId.lastIndexOf('_'));
    var parent1=parent2.substr(0,parent2.lastIndexOf('_'));
    if ($(obj).prop("checked")){
        $("input[id='" + parentCheId + "']").prop("checked", true);
        $("input[id='" + parent2 + "']").prop("checked", true);
        $("input[id='" + parent1 + "']").prop("checked", true);
    } else {
        $("input[id='" + parentCheId + "']").prop("checked", false);
        var parent3=parent2+"_";
        var index=0;
        $("input[id^='"+parent3+"']:checked").each(function(){
            index++;         
        });
        if(index==0){
            $("input[id='" + parent2 + "']").prop("checked", false);
        }
        var parent4=parent1+"_";
        var index2=0;
        $("input[id^='"+parent4+"']:checked").each(function(){
            index2++;         
        });
        if(index2==0){
            $("input[id='" + parent1 + "']").prop("checked", false);
        }
    }
}