核心提示:html片段ul class=limit-ul clearfixli class=liboxul class=sib-ullilabel class=mb0input type=checkbox na...
html片段
<ul class="limit-ul clearfix"> <li class="libox"> <ul class="sib-ul"> <li><label class="mb0"><input type="checkbox" name="subBox" /> 查看</label></li> <li><label class="mb0"><input type="checkbox" name="subBox" /> 新建</label></li> <li><label class="mb0"><input type="checkbox" name="subBox" /> 查看详情</label></li> <li><label class="mb0"><input type="checkbox" name="subBox" /> 查看物流轨迹</label></li> </ul> </li> <li class="subCheckAll"><label class="mb0"><input type="checkbox" name="subBox" /> 全选</label></li> </ul>
js代码
<script> $("input[type='checkbox']").iCheck({ checkboxClass : 'icheckbox_square-blue' }) $(function() { // S 全选 var $subBox = $("input[name='subBox']"); // 点击全选 $("#checkAll").on("ifChanged",function() { if($(this).is(":checked")){ $subBox.iCheck("check"); }else{ $subBox.iCheck("uncheck"); } }); $(".limit-ul").each(function(){ // 获取二级ul.sib-ul下面的input subBox1 = $(this).find(".sib-ul").find("input[name='subBox']"); lilen=$(this).find(">li").length; // 点击子级全选 $(this).find(".subCheckAll input[name='subBox']").on("ifChanged",function() { var Oinpt = $(this).parents(".limit-ul").find(".sib-ul input[name='subBox']"); if($(this).is(":checked")){ Oinpt.iCheck("check"); }else{ Oinpt.iCheck("uncheck"); } }); // 点击二级ul.sib-ul下面的[name='subBox'],如果二级ul.sib-ul下面的[name='subBox']选中个数 与 二级ul.sib-ul下面的[name='subBox']相等,那么子级全选框选中。否则反之 subBox1.on("ifChanged",function(){ var Oinpt1 = $(this).parents(".sib-ul").parents(".limit-ul").find(".subCheckAll input[name='subBox']"); if($(this).parents(".sib-ul").find("input[name='subBox']:checked").length == $(this).parents(".sib-ul").find("input[name='subBox']").length){ Oinpt1.iCheck("check"); }else{ Oinpt1.prop("checked",false) Oinpt1.parents(".icheckbox_square-blue").removeClass("checked"); } }); // 点击任意[name='subBox'],如果[name='subBox']选中个数 与 [name='subBox']相等,那么全选框选中。否则反之 $subBox.on("ifChanged",function(){ var inpLen = $("input[name='subBox']:checked").length; if($subBox.length ==inpLen){ $("#checkAll").iCheck("check"); }else{ $("#checkAll").prop("checked",false) $("#checkAll").parents(".icheckbox_square-blue").removeClass("checked"); } }); }); // E 全选 }); </script>