最终实现效果如下
html+css如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/font-awesome.min.css"> 7 </head> 8 <style> 9 *{padding:0;margin: 0;} 10 .flexBox{ 11 display: -webkit-flex; 12 display: -moz-flex; 13 display: -ms-flex; 14 display: -o-flex; 15 display: flex; 16 height: 40px;line-height: 40px; 17 } 18 .classHead p{width: 50%;} 19 .grandpa .grandpa-item>.flexBox{border-top: solid 2px #999;padding-left: 30px;} 20 .grandpa .flexBox label, 21 .grandpa .flexBox p{width: 50%;} 22 .grandpa .father .father-item>.flexBox{padding-left: 60px;background: #f9f9f9;border-top: solid 1px #ccc;} 23 .grandpa .father .children .children-item .flexBox{padding-left: 90px;} 24 .grandpa .father .children .children-item:nth-of-type(even) .flexBox{background: #f9f9f9;} 25 .grandpa li{position: relative;} 26 .grandpa li.grandpa-item .fa{position: absolute;left: 10px;top: 11px;display: block;width: 20px;height: 20px;cursor: pointer;} 27 .grandpa li.father-item .fa{position: absolute;left: 38px;top: 11px;display: block;width: 20px;height: 20px;cursor: pointer;} 28 ul,ul li{list-style: none;padding: 0;margin: 0;} 29 </style> 30 <body> 31 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> 32 33 <div style=" 600px;margin:50px 100px;"> 34 <div class="classHead flexBox"><p>分类ID</p><p>分类名称</p></div> 35 <ul class="grandpa"> 36 <li class="grandpa-item"> 37 <span class="fa fa-chevron-up"></span> 38 <div class="flexBox"> 39 <label class="grandpa-item-label"> 40 <input type="checkbox">一 41 </label> 42 <p>男装</p> 43 </div> 44 <ul class="father"> 45 <li class="father-item"> 46 <span class="fa fa-chevron-up"></span> 47 <div class="flexBox"> 48 <label class="father-item-label"> 49 <input type="checkbox">1 50 </label> 51 <p>男士衬衫</p> 52 </div> 53 <ul class="children"> 54 <li class="children-item"> 55 <div class="flexBox"> 56 <label class="children-item-label"> 57 <input type="checkbox">a 58 </label> 59 <p>男士衬衫1</p> 60 </div> 61 </li> 62 <li class="children-item"> 63 <div class="flexBox"> 64 <label class="children-item-label"> 65 <input type="checkbox">b 66 </label> 67 <p>男士衬衫2</p> 68 </div> 69 </li> 70 <li class="children-item"> 71 <div class="flexBox"> 72 <label class="children-item-label"> 73 <input type="checkbox">e 74 </label> 75 <p>男士衬衫3</p> 76 </div> 77 </li> 78 <li class="children-item"> 79 <div class="flexBox"> 80 <label class="children-item-label"> 81 <input type="checkbox">f 82 </label> 83 <p>男士衬衫4</p> 84 </div> 85 </li> 86 <li class="children-item"> 87 <div class="flexBox"> 88 <label class="children-item-label"> 89 <input type="checkbox">g 90 </label> 91 <p>男士衬衫5</p> 92 </div> 93 </li> 94 </ul> 95 </li> 96 <li class="father-item"> 97 <span class="fa fa-chevron-up"></span> 98 <div class="flexBox"> 99 <label class="father-item-label"> 100 <input type="checkbox">2 101 </label> 102 <p>男士裤子</p> 103 </div> 104 <ul class="children"> 105 <li class="children-item"> 106 <div class="flexBox"> 107 <label class="children-item-label"> 108 <input type="checkbox">c 109 </label> 110 <p>男士短裤</p> 111 </div> 112 </li> 113 <li class="children-item"> 114 <div class="flexBox"> 115 <label class="children-item-label"> 116 <input type="checkbox">d 117 </label> 118 <p>男士长裤</p> 119 </div> 120 </li> 121 </ul> 122 </li> 123 </ul> 124 </li> 125 <li class="grandpa-item"> 126 <span class="fa fa-chevron-up"></span> 127 <div class="flexBox"> 128 <label class="grandpa-item-label"> 129 <input type="checkbox">二 130 </label> 131 <p>女装</p> 132 </div> 133 <ul class="father"> 134 <li class="father-item"> 135 <span class="fa fa-chevron-up"></span> 136 <div class="flexBox"> 137 <label class="father-item-label"> 138 <input type="checkbox">1 139 </label> 140 <p>女士上衣</p> 141 </div> 142 <ul class="children"> 143 <li class="children-item"> 144 <div class="flexBox"> 145 <label class="children-item-label"> 146 <input type="checkbox">x 147 </label> 148 <p>牛仔外套</p> 149 </div> 150 </li> 151 <li class="children-item"> 152 <div class="flexBox"> 153 <label class="children-item-label"> 154 <input type="checkbox">y 155 </label> 156 <p>风衣</p> 157 </div> 158 </li> 159 </ul> 160 </li> 161 </ul> 162 </li> 163 </ul> 164 </div> 165 </body> 166 </html>
以下是js部分，具体实现逻辑是三层结构，一个大分类里有一个选中则禁用其他分类选项，三层全选和全不选
1 !(function(){ 2 // 爷级全选 3 $('.grandpa-item-label').find("input[type=checkbox]").change(function(){ 4 $(this).parents(".grandpa-item").find(".father-item").find(':checkbox').prop('checked',$(this).is(':checked')?true:false); 5 }); 6 // 父级全选 7 $('.father-item-label').find("input[type=checkbox]").change(function(){ 8 $(this).parents(".father-item").find(".children-item").find(':checkbox').prop('checked',$(this).is(':checked')?true:false); 9 }); 10 $(".grandpa").find("input[type=checkbox]").bind("change",function(){ 11 if(!$(this).is(":checked")){ //子集有一个没选中去掉父级全选 12 $(this).parents(".father-item").find(".father-item-label input[type=checkbox]").prop('checked',false) 13 $(this).parents(".grandpa-item").find(".grandpa-item-label input[type=checkbox]").prop('checked',false) 14 } 15 //disabled 16 var allCheck = false; 17 $(this).parents(".grandpa-item").find("input[type=checkbox]").each(function(i,item){ 18 if($(item).is(":checked")){ 19 allCheck = true; 20 $(this).parents(".grandpa-item").siblings(".grandpa-item").find("input[type=checkbox]").attr("disabled","disabled"); 21 return false; 22 } 23 }) 24 if(!allCheck){ 25 $(".grandpa").find("input[type=checkbox]").removeAttr("disabled"); 26 } 27 // 28 var fatherCheck = false; 29 $(this).parents(".father-item").find(".children-item-label input[type=checkbox]").each(function(i,item){ 30 if(!$(item).is(":checked")){ 31 fatherCheck = true; 32 return false; 33 } 34 }) 35 if(!fatherCheck){ 36 $(this).parents(".father-item").find(".father-item-label input[type=checkbox]").prop('checked',true); 37 } 38 // 39 var grandpaCheck = false; 40 $(this).parents(".grandpa-item").find(".father-item-label input[type=checkbox]").each(function(i,item){ 41 if(!$(item).is(":checked")){ 42 grandpaCheck = true; 43 return false; 44 } 45 }) 46 if(!grandpaCheck){ 47 $(this).parents(".grandpa-item").find(".grandpa-item-label input[type=checkbox]").prop('checked',true); 48 }; 49 }) 50 //slider 51 $(".grandpa .fa").click(function(){ 52 if($(this).hasClass("fa-chevron-up")){ 53 $(this).addClass("fa-chevron-down").removeClass("fa-chevron-up"); 54 $(this).parent().find("ul").slideUp(200) 55 }else{ 56 $(this).addClass("fa-chevron-up").removeClass("fa-chevron-down"); 57 $(this).parent(".grandpa-item").find("ul .fa").addClass("fa-chevron-up").removeClass("fa-chevron-down"); 58 $(this).parent().find("ul").slideDown(200); 59 } 60 }) 61 })()