JQ 封装全选函数

效果:

如果有一个没有选中把全选的勾去了,如果select所有的都选中了,那就把全选勾上

html里:

<div class="row cl">

   <label class="form-label col-xs-4 col-sm-2 "><span class="c-red">*</span>可购买者等级列表：</label>

   <div class="formControls col-xs-8 col-sm-9 skin-minimal checktop">
      <input type="checkbox" id="purchaser_levelAll" onclick="checkAll(this,'purchaser_level_select')" value="">
      <span class="mr-5">All</span>
      @foreach($memberLevleList as $vo)
      <div class="check-box">
         <input type="checkbox" onclick="check_isAll(this,'purchaser_level_select','purchaser_levelAll')" class="purchaser_level_select" id="purchaser_level_ids-{{$vo->id}}" name="purchaser_level_ids[]" value="{{$vo->id}}">
         <label for="purchaser_level_ids-{{$vo->id}}">{{$vo->status_name}}</label>
      </div>
      @endforeach

   </div>
</div>

js里:

//如果有一个没有选中把全选的勾去了,如果select所有的都选中了,那就把全选勾上
/**
 * 全选:
 * @author haima
 * @param $this 当着元素
 * @param $className 要操作的所有的select的class名字
 */
function checkAll($this,$className){
    var current=$($this);
    if(current.is(':checked')) {
        $('.'+$className).prop('checked',true);
    }else{
        $('.'+$className).prop('checked',false);
    }
}

/**
 * @author haima
 * @param $this 当前操作的元素
 * @param $className 所有的select的class名字
 * @param $selectname_All 选择所有的select的id名字
 */
function check_isAll($this,$className,$selectname_All){
    var current=$($this); //当着元素
    var selectname_All = $('#'+$selectname_All); //全选按钮的名字
    if(current.is(':checked')) {
        var len_num=0;
        $('.'+$className).each(function(){
            if(!this.checked){
                selectname_All.prop('checked',false);
                return false;
            }else{
                len_num += 1;
            }
        });
        var len=$('.'+$className).length; //长度
        if(len == len_num){
            selectname_All.prop('checked',true);
        }
    }else{
        selectname_All.prop('checked',false);
    }
}

JQ 封装全选函数

原文：https://www.cnblogs.com/haima/p/10559990.html