效果:

如果有一個沒有選中把全選的勾去了,如果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 封裝全選函數