首页 > 其他 > 详细

JQ 封装全选函数

时间:2019-03-19 17:57:03      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:有一个   top   for   eve   .com   14.   isa   this   else   

效果:

如果有一个没有选中把全选的勾去了,如果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 封装全选函数

标签:有一个   top   for   eve   .com   14.   isa   this   else   

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

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号