ナビゲーション・ツリーのマルチ・チェックボックス はコメントを受け付けていません。

タイプ

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