关于 导航树 中的多选框

样式

appearance: none;outline: none;

通过放一个伪元素，更改为图片或字体图标样式

input[type='checkbox']:before{
   background: #333;
}

一棵树

点击事件

 checkControl(e){    if( e.currentTarget.checked == false ){      $(e.currentTarget).removeClass( "icon-check-square-o").addClass("icon-square-o-blue");       $(e.currentTarget.nextSibling.nextSibling.nextSibling.nextSibling).find(".check_unit").prop('checked', false).removeClass( "icon-check-square-o").addClass("icon-square-o-blue"); ;      this.checkLoop($('.tier0'))    }else{      $(e.currentTarget).removeClass("icon-square-o-blue").addClass( "icon-check-square-o");       $(e.currentTarget.nextSibling.nextSibling.nextSibling.nextSibling).find(".check_unit").prop('checked', true).removeClass("icon-square-o-blue").addClass( "icon-check-square-o");      this.checkLoop($('.tier0'))    }      }

父子联动判断勾选与未勾选状态

checkLoop(dom){    if(dom.children('div').length >0 ){      let _obj = dom.children('div').children('ul').children('li');      // debugger      if(_obj.length > 0){        _obj.each((i, ele) => {//ele就是li          this.checkLoop($(ele));          // debugger          if($(ele).children('div').length > 0){            if($(ele).children('div').children('ul').find('input:checked').length === $(ele).children('div').children('ul').find('input').length){              $(ele).children("input:first-child").prop('checked', true).removeClass("icon-square-o-blue icon-pull-up").addClass( "icon-check-square-o");             }else if($(ele).children('div').children('ul').find('input:checked').length != $(ele).children('div').children('ul').find('input').length && $(ele).children('div').children('ul').find('input:checked').length != 0){              $(ele).children("input:first-child").prop('checked', true).removeClass("icon-square-o-blue icon-check-square-o").addClass( "icon-pull-up");             }else{              $(ele).children("input:first-child").prop('checked', false).removeClass("icon-pull-up icon-check-square-o").addClass( "icon-square-o-blue");             }          }        })      }    }  }