做毕设遇到一处需要复选框树，觉得easyui略丑，而zui又没有复选框树，只有树形菜单，遂自己撸！

效果图

树形结构用了zui的树形菜单，然后自己添加复选框，自己写复选框级联，是一个递归。（所以好好学习算法数据结构～）
代码如下

<ul class="tree" data-ride="tree" id="tree">
  <li>
    <input type="checkbox"/><a href="#">水果</a>
    <ul>
      <li><input type="checkbox"/><a href="#">苹果</a></li>
      <li>
        <input type="checkbox"/><a href="#">热带水果</a>
        <ul>
          ...
        </ul>
      </li>
      <li><input type="checkbox"/><a href="#">梨子</a></li>
      ...
    </ul>
  </li>
  <li><input type="checkbox"/><a href="#">粥饭</a></li>
  ...
</ul>

这边是zui官网的demo，然后自己加了checkbox。
下面是实现复选框级联的代码：

// 监听复选框
 $('#tree [type="checkbox"]').change(function () {
        if($(this).is(":checked")) {
            // 如果变为已选，则将其子复选框全部变成已选
            $(this).parent().find(':checkbox').prop("checked", true);
        } else {
            // 如果变为未选，则将其子复选框全部变成未选
            $(this).parent().find(':checkbox').prop("checked", false);
            
        }
        reloadExamineeTree();
    });

    // 更新整个复选框，实现级联
    function reloadExamineeTree(){
        // 遍历几个根复选框
        $('#tree ').children('li').each(function(){
            setChecked($(this).children('input')[0])
        });
    }

    // 递归设置每一个非叶子复选框的状态
    function setChecked(dom) {
        if($(dom).next().next().find(':checkbox').length==0){
            //console.log(dom);
            return $(dom).is(':checked')?1:0;
        } else {
            var sum=0;
            $(dom).next().next().children().each(function () {
                sum += setChecked($(this).children('input')[0]);
            });
            if(sum == $(dom).next().next().children().length){
                $(dom).prop('checked', true);
            }else {
                $(dom).prop('checked', false);

            }
            //console.log(sum);
            return $(dom).is(':checked')?1:0;

        }
    }