iCheck 全选

最新推荐文章于 2018-12-25 19:18:20 发布

lala1091

最新推荐文章于 2018-12-25 19:18:20 发布

阅读量413

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/lala1091/article/details/77532742

版权

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>