jQuery完结全选,轻易落成js弹框展现选项

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

我这里是采用fixed定位,然后height是传进来的高(百分比),top距离屏幕顶端距离百分比为
100-传进来的高 /2
,这样就实现了垂直居中,同理宽度也一样。这种水平垂直居中的办法也是自己长期实践总结出来自己认为最简单最实用的,兼容各种屏幕大小,当然还有很多方法,可以自行尝试

我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮。

您可能感兴趣的文章:

  • 基于layer.js实现收货地址弹框选择然后返回相应的地址信息
  • js实现上下左右弹框划出效果
  • struts json
    类型异常返回到js弹框问题解决办法
  • javascript实现无法关闭的弹框
  • Bootstrap和Angularjs配合自制弹框的实例代码
  • js自定义弹框插件的封装

自动关闭

$("#reverse").click(function () { 
  $("#list :checkbox").each(function () { 
    $(this).prop("checked", !$(this).prop("checked")); 
  });
  allchk();
});

 js片段代码

首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层,一个浮在底下的蒙层(遮罩层),将所有的元素遮起来,并且最好是半透明。另一个就是弹框主体部分了,一般情况需要水平垂直居中,并且通常包含标题,主体内容需要可定制,如果是模态框通常还有确认/取消按钮。最后就是弹出、关闭的时候一些动效。

//设置全选复选框
$("#list :checkbox").click(function(){
  allchk();
});

-点击弹出弹框
-点击复选框,已选div中 显示已选中的选项
-再次点击取消选中状态,已选div中 显示的选中选项取消显示
-点击 已选 div中的 选项x图标,取消显示该选项 ,取消相应复选框选中状态​
-点击大类,小类取消选中状态,点击小类,选中大类取消选中状态
-最多3个选项可以被选中
-点击x图标关闭弹框
-点击确定按钮显示选择后的结果

弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如
经典的artDialog 炫酷的Sweetalert等等..

HTML

图片 1

我这里实现了四个效果,分别是fadeIn跌落,sideLeft从左侧飞入,scale放大,info提示信息。可以看到,我是定义了一个集合对象,分别放置了对应的css属性,然后通过两个setTimeout函数统一赋值

$(function () {
 //全选或全不选
 $("#all").click(function(){ 
  if(this.checked){ 
   $("#list :checkbox").prop("checked", true); 
  }else{ 
  $("#list :checkbox").prop("checked", false);
  } 
  }); 
 //全选 
 $("#selectAll").click(function () {
   $("#list :checkbox,#all").prop("checked", true); 
 }); 
 //全不选
 $("#unSelect").click(function () { 
   $("#list :checkbox,#all").prop("checked", false); 
 }); 
 //反选 
 $("#reverse").click(function () { 
   $("#list :checkbox").each(function () { 
    $(this).prop("checked", !$(this).prop("checked")); 
   });
   allchk();
 });

 //设置全选复选框
 $("#list :checkbox").click(function(){
  allchk();
 });

 //获取选中选项的值
 $("#getValue").click(function(){
  var valArr = new Array;
  $("#list :checkbox[checked]").each(function(i){
   valArr[i] = $(this).val();
  });
  var vals = valArr.join(',');
   alert(vals);
 });
}); 
function allchk(){
 var chknum = $("#list :checkbox").size();//选项总个数
 var chk = 0;
 $("#list :checkbox").each(function () { 
  if($(this).prop("checked")==true){
   chk++;
  }
 });
 if(chknum==chk){//全选
  $("#all").prop("checked",true);
 }else{//不全选
  $("#all").prop("checked",false);
 }
}
<div class="one_search clearfix">
  <label class="search_label">科室分类:</label>
  <div class="search_select">
    <input type="hidden" name="cg_str" id="cg_str" @if(Input::has('cg_str')) value="{{Input::get('cg_str')}}" @endif />
    <input type="text" name="type" id="type" onClick="getWindowPop()" @if(Input::has('type')) value="{{Input::get('type')}}" @endif/>
  </div>
</div> 
<!-- 科室类型start -->
<div id="closePopWindow" style="display: none;">
  <div class="cover"></div>
  <div class="pop_sele_box">
    <div class="pop_tab_menu">
      <ul id="tagChange">
        <li><a href="javascript:void(0);">临床医学</a></li>
        <li><a href="javascript:void(0);">辅助科室</a></li>
        <li><a href="javascript:void(0);">其他</a></li>
        <li class="pop_close"><a class="close" onclick="$('#closePopWindow').fadeOut()"></a></li>
      </ul>
      <div class="clear"></div>
    </div>

    <div class="pop_sele_cont_box" >
    <!-- 临床医学-S -->
      <div class="pop_sele">
        <!-- 内科-S -->
        <div class="sele_tit_block">
          <input class="sele_check" type="checkbox" value="4" parent="1"/>
          <label class="sele_tit_txt">内科</label>
          <div class="clear"></div>
        </div>
        @foreach($oLcyx1 as $key=>$val)
        <div class="sele_block clearfix">
          <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
          <label class="sele_txt">{{$val->name}}</label>
          <div class="clear"></div>
        </div>
        @endforeach
        <div class="clear"></div>
        <!-- 内科-E --> 
        <!-- 外科-S -->
        <div class="sele_tit_block">
          <input class="sele_check" type="checkbox" value="5" parent="1"/>
          <label class="sele_tit_txt">外科</label>
          <div class="clear"></div>
        </div>
        @foreach($oLcyx2 as $key=>$val)
        <div class="sele_block clearfix">
          <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
          <label class="sele_txt">{{$val->name}}</label>
          <div class="clear"></div>
        </div>
        @endforeach
        <div class="clear"></div>
        <!-- 外科-E -->
        <!-- 其他-S -->
        <div class="sele_tit_block">
          <input class="sele_check" type="checkbox" value="6" parent="1"/>
          <label class="sele_tit_txt">其他</label>
          <div class="clear"></div>
        </div>
        @foreach($oLcyx3 as $key=>$val)
        <div class="sele_block clearfix">
          <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
          <label class="sele_txt">{{$val->name}}</label>
          <div class="clear"></div>
        </div>
        @endforeach
        <div class="clear"></div> 
        <!-- 其他-E -->               
      </div>
    <!-- 临床医学 -E --> 
    <!-- 辅助科室-S -->
      <div class="pop_sele">
        <div class="sele_tit_block">
          <div class="clear"></div>
        </div>
        @foreach($oFzks as $key=>$val)
        <div class="sele_block clearfix">
          <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
          <label class="sele_txt">{{$val->name}}</label>
          <div class="clear"></div>
        </div>
        @endforeach
        <div class="clear"></div> 
      </div>
    <!-- 辅助科室-E -->   
    <!-- 医药公司-S -->
      <div class="pop_sele">
        <div class="sele_tit_block">
          <div class="clear"></div>
        </div>
        @foreach($oYygs as $key=>$val)
        <div class="sele_block clearfix">
          <input class="sele_check" type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/>
          <label class="sele_txt">{{$val->name}}</label>
          <div class="clear"></div>
        </div>
        @endforeach
        <div class="clear"></div> 
      </div> 
    <!-- 医药公司-E -->   
    </div>

<!-- 信息选中后出现的位置-S -->
    <div class="pop_btm_box">
      <div class="sele_department_block">
        <div class="left_block">已选:</div>
        <div class="right_block">
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="pop_btn_block">
        <input class="pop_btn" type="button" value="确定" onClick="checkReturn();"/>
      </div>
    </div>
<!-- 信息选中后出现的位置-E -->
<!--信息提示-->
    <div class="pop_txt_box" id="msg">最多3个选项</div>
  </div>
</div>
<!-- 科室类型end --> 
var $alertContent = $('#alertContent'),
      $alertMain = $('#alertMain');

    $alertContent.css({
      'height': opts.height + '%',
      'top': (100 - opts.height)/2 + '%',
      'width': opts.width + '%',
      'left': (100 - opts.width)/2 + '%'
    })

    $('.li-opacity').css({
      '-webkit-animation-duration' : opts.delayTime/1000 + 's'
    })
function allchk(){
  var chknum = $("#list :checkbox").size();//选项总个数
  var chk = 0;
  $("#list :checkbox").each(function () { 
    if($(this).prop("checked")==true){
      chk++;
    }
  });
  if(chknum==chk){//全选
    $("#all").prop("checked",true);
  }else{//不全选
    $("#all").prop("checked",false);
  }
}

代码块

css

3、全不选。当点击全不选按钮#unSelect时,列表中所有的选项都是未选中状态,当然包括#all也是未选中状态。

html片段代码

演示:

4、反选。当点击反选按钮#reverse,列表中所有被选中的选项变为未选中状态,而所有未选中的选项变为已选中状态,当然也要注意#all的状态。

效果

定义一个数组对象,里面放弹框的dom元素,alert-mask为全屏的遮罩层,alert-content为弹框的主要内容区,最后通过.join(‘’)函数将数组转换为html
,再用jquery的append()方法追加在body节点最后。

上述代码中遍历了选项列表,然后改变checked属性,调用函数allchk()是干什么的,别急,留在后面介绍。

<script>
//定义初始全局变量
var num = 1;//科室类别可选数量
var cg_str = '';//科室类别id字符串
var type = '';//科室类别名字符串

//刷新保持选中状态
$(function(){
 var str = $("#cg_str").val();
 if(str.length < 1){
  return false;
 }else{
  cg_str = str + '/';
  type = $("#type").val() + '+';
 }
 str = str.split("/");
 for(var i = 0; i < str.length; i++){
  $("div.pop_sele").find("div").find("input[type='checkbox']").each(function(){
   if($(this).val() == str[i]){
    $(this).attr("checked", true);
    var Val = $(this).val();
    var labelVal = $(this).next("label").html().trim();
    //放置到已选div 中
    var html = '<div class="department_block">'
         +   '<div class="left">' + labelVal + '</div>'
          +  '<div class="right">'
          +   '<a href="javascript:void(0);" onclick="removeSelector(this, ' + Val + ');"></a>'
          +  '</div>'
         + '</div>';
    $("div.right_block").append(html);
    num++;
   }
  });
 }
});

//打开 科室类别选项框
function idNumber(prefix){
 var idNum = prefix;
 return idNum;
}
function show_hidden(controlMenu,num,prefix){
 controlMenu.eq(num).siblings().find('a').removeClass("sele");
 controlMenu.eq(num).find('a').addClass("sele");
 var content= prefix + num;
 $('#'+content).show();
 $('#'+content).siblings().hide();
}
function getWindowPop(){
 $("ul#tagChange li").find("a").removeClass("sele");
 $("ul#tagChange li:first-child a").addClass("sele");
 $("div.pop_sele_cont_box").find("div.pop_sele:first-child").show();
 $("div.pop_sele_cont_box").find("div.pop_sele:not(:first-child)").hide();
 $("div.pop_sele_cont_box div.pop_sele").attr("id",function(){
  return idNumber("No")+ $("div.pop_sele_cont_box div.pop_sele").index(this);
 });
 $('#closePopWindow').show();
}
$("ul#tagChange li:not(:last-child)").click(function(){
 var c = $("ul#tagChange li");
 var index = c.index(this);
 if(index<3){
  var p = idNumber("No");
  show_hidden(c,index,p);
 }
});

//选择科室类别 
$("div.pop_sele").find("div").find("input[type='checkbox']").click(function(){
 var Val = $(this).val(); 
 var labelVal = $(this).next('label').html().trim();
 var parent = $(this).attr("parent");
 if($(this).is(":checked")){//选中处理
  //处理大小类选项
       $("div.pop_sele").find("div").find("input[type='checkbox']:checked").each(function(){
   if($(this).val() == parent || $(this).attr("parent") == Val){
    $(this).attr("checked", false);
    var v = $(this).val();
    var lab = $(this).next('label').html().trim();//当前对象标签值
    $("div.department_block").find("div.left").each(function(){
     if($(this).html().trim() == lab){
      var index = $("div.department_block").find("div.left").index(this);
      $("div.department_block").eq(index).remove();//移除该已选 选项
      //修改科室类别 值
      cg_str = cg_str.replace(v + '/', "");
      type = type.replace(lab + '+', "");
      num--;
     }
    });
   }
  });

  //判断num值
  if(num > 3){
   $('#msg').html("最多3个选项");
   $('#msg').fadeIn();
   setTimeout(function(){$('#msg').fadeOut();},1000);
   return false;
  }
  cg_str += Val + '/';
  type += labelVal + '+';
  //放置到已选div 中
  var html = '<div class="department_block">'
     +   '<div class="left">' + labelVal + '</div>'
        +  '<div class="right">'
        +   '<a href="javascript:void(0);" onclick="removeSelector(this, ' + Val + ');"></a>'
        +  '</div>'
       + '</div>';
  $("div.right_block").append(html);
  num++;
 }else{//未选中
  $(this).attr("checked", false);
  $("div.department_block").find("div.left").each(function(){
   if($(this).html().trim() == labelVal){
    var index = $("div.department_block").find("div.left").index(this);
    $("div.department_block").eq(index).remove();//移除该已选 选项
    //修改科室类别 值
    cg_str = cg_str.replace(Val + '/', "");
    type = type.replace(labelVal + '+', "");
    num--;
   }
  });
 }
});

//清除已选 选项
function removeSelector(obj, val){
 var index = $("div.department_block").find("div.right").find("a").index(obj);
 var labelVal = $(obj).parent().parent().find("div.left").html().trim();
 $("div.department_block").eq(index).remove();//移除该已选 选项
 //复选框置为未选中
 $("div.pop_sele").find("div").find("input[type='checkbox']:checked").each(function(){
  if($(this).val() == val){
   $(this).attr("checked", false);
  }
 });
 //修改科室类别 值
 cg_str = cg_str.replace(val + '/', "");
 type = type.replace(labelVal + '+', "");
 num--;
}

//关闭科室类别选项框
function checkReturn(){
 //将值放入文本框
 var cg_ids = cg_str.substring(0,cg_str.length-1);
 var type_str = type.substring(0, type.length-1);
 $("#cg_str").val(cg_ids);
 $("#type").val(type_str);
 $('#closePopWindow').fadeOut();
}
</script>
if(opts.blankclose) {
      $('.alert-main :not(.alert-content)').on('click',function(event){
        $alertMain.remove()
        opts.close && opts.close()
        event.stopPropagation()
        event.preventDefault()
      })
    }

jQuery

先看看效果:

var defaultOpts = {
        title: '',//标题
        content: '',//内容 文字 || html
        height: 50,//默认屏幕(父级)的50%
        width: 80,//默认屏幕(父级)的80%
        type: 'alert-default',//弹框类型
        effect: 'fadeIn',//出现效果,默认下跌落
        delayTime: 500,//效果延时时间,默认.5s
        autoClose: false,//自动关闭
        autoTime: 2000, //自动关闭时间默认2s
        autoEffect: 'default',//关闭效果
        ok: '确定',
        okCallback: function(){},//确定回调
        cancel: '取消',
        cancelCallback: function(){},//取消回调
        before : function() {
          console.log('before')
        }, 
        close: function() {
          console.log('close')
        },
        blankclose: false//空白处点击关闭
      }

    for (i in defaultOpts) {
      if (opts[i] === undefined) {
        opts[i] = defaultOpts[i]
      }
    }
  
  opts.before && opts.before()

为了完善选中选项功能,我们在单击列表中某个选项时,如果勾选的项刚好满足全部选中的条件,则#all也要相应的变为选中状态,同样,如果事先所有的选项是选中状态时,当取消勾选某个选项时,那么#all也要相应的变为未选中状态。

图片 2

总结

空白处点击关闭

1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值,我们通过遍历数组,将选中项的值存放在数组中,最后组成由逗号(,)隔开的字符串,开发者就可以通过获取这个字符串进行相应的操作了。

@-webkit-keyframes opacity {
      0% {
        opacity: 0; /*初始状态 透明度为0*/
      }
      50% {
        opacity: 0; /*中间状态 透明度为0*/
      }
      100% {
        opacity: 1; /*结尾状态 透明度为1*/
      }
    }

    .li-opacity {
      -webkit-animation-name: opacity; /*动画名称*/
      -webkit-animation-iteration-count: 1; /*动画次数*/
      -webkit-animation-delay: 0s; /*延迟时间*/
    }
    .alert-mask {
      position: fixed;
      height: 100%;
      width: 100%;
      left: 0%;
      top: 0%;
      z-index: 9998;
      background-color: rgba(0,0,0,.7);
    }
    .alert-content {
      position: fixed;
      box-sizing: border-box;
      border-radius: 4px;
      z-index: 9999;
      -webkit-transition: .4s;
      -moz-transition: .4s;
      transition: .4s;
      display: none;
    }
    .alert-show {
      display: block;
    }
    .alert-default {
      background-color: white;
    }

2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时,列表中所有的选项都会被选中,包括全选旁边的复选框也是选中状态。

 所以说完全可以自己封装一个,然后放在项目中公共js中去。能自己手写的尽量不用插件….

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置”checked”属性的值,true未选中,false为未选中,在整个全选、反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值。以下我将所有jQuery代码整理在一起,供大家参考。

通过一个foreach循环,类似于传入的opts继承了defaultOpts属性,在调用弹框之前执行的before()方法,相当于一些准备工作

$("#selectAll").click(function () {
  $("#list :checkbox,#all").prop("checked", true); 
});

js

<ul id="list"> 
  <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
  <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
  <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
  <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
  <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
  <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll"> 
<input type="button" value="全不选" class="btn" id="unSelect"> 
<input type="button" value="反选" class="btn" id="reverse"> 
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

完整的代码已上传github:

$("#unSelect").click(function () { 
  $("#list :checkbox,#all").prop("checked", false); 
});

html

本文给大家分享一段基于jQuery的全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者。

一些默认属性值

$("#getValue").click(function(){
  var valArr = new Array;
  $("#list :checkbox[checked]").each(function(i){
    valArr[i] = $(this).val();
  });
  var vals = valArr.join(',');//转换为逗号隔开的字符串
  alert(vals);
});

设置高宽了,水平垂直居中

您可能感兴趣的文章:

  • jquery实现全选、不选、反选的两种方法
  • jQuery对checkbox
    复选框的全选全不选反选的操作
  • 利用jQuery实现CheckBox全选/全不选/反选的简单代码
  • jquery
    全选、全不选、反选效果的实现代码【推荐】
  • 基于jquery实现复选框全选,反选,全不选等功能
  • JQuery选中checkbox方法代码实例(全选、反选、全不选)
  • 基于jQuery实现复选框的全选 全不选
    反选功能
  • jquery全选/全不选/反选另一种实现方法(配合原生js)
  • jquery
    实现checkbox全选,反选,全不选等功能代码(奇数)

当autoClose为true,并且autoTime大于零时,用一个延时事件自动关闭弹框

函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的,请看代码。

var effect = {
      'fadeIn': 'top',
      'fadeInStart': '-100%',
      'fadeInValue': (100 - opts.height)/2 + '%',
      'sideLeft': 'left',
      'sideLeftStart': '-100%',
      'sideLeftValue': (100 - opts.width)/2 + '%',
      'scale': '-webkit-transform',
      'scaleStart': 'scale(0)',
      'scaleValue': 'scale(1)',
      'info': '-webkit-transform',
      'infoStart': 'scale(1.2)',
      'infoValue': 'scale(1)'
    }

    setTimeout(function(){
      $alertContent.css(effect[opts.effect],effect[opts.effect + 'Start']).addClass('alert-show')

      setTimeout(function(){
        $alertContent.css(effect[opts.effect], effect[opts.effect + 'Value'])
        opts.close && opts.close()
      },10)
    },opts.delayTime)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

最后一句是给遮罩层赋一个动画执行时间,实现淡入效果。详情见下面的CSS
@-webkit-keyframes opacity

$("#all").click(function(){  
  if(this.checked){  
    $("#list :checkbox").prop("checked", true); 
  }else{  
  $("#list :checkbox").prop("checked", false);
  }  
});
if(opts.autoClose && opts.autoTime > 0) {
      setTimeout(function(){$alertMain.remove()},opts.autoTime)
      opts.close && opts.close()
    }

但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高。

dom结构

您可能感兴趣的文章:

  • 基于layer.js实现收货地址弹框选择然后返回相应的地址信息
  • js实现上下左右弹框划出效果
  • struts json
    类型异常返回到js弹框问题解决办法
  • javascript实现无法关闭的弹框
  • 轻松实现js弹框显示选项
  • Bootstrap和Angularjs配合自制弹框的实例代码

效果图

var alertHtml = [
        '<section class="alert-main" id="alertMain">',
          '<div class="alert-mask li-opacity" id="alertMask"></div>',
          '<div class="alert-content '+ opts.type +'" id="alertContent">',
          opts.content +'</div>',
        '</section>'
      ]

    $('body').append(alertHtml.join(''))

通常情况下的需求,都会是要点击弹框空白处关闭弹框,一个点击事件搞定,重点是前面的选择器,jquery给了我们太多方便….
当然最后为了防止点击到页面其他元素,阻止事件冒泡,组件默认行为..

<p class="alert" data-flag="fadeIn">fadeIn</p>
<p class="alert" data-flag="sideLeft">sideLeft</p>
<p class="alert" data-flag="scale">scale</p>
<p class="alert" data-flag="info">info</p> 
require.config({
  jquery:'component/jquery/jquery-3.1.0.min',
  liAlert: 'li/li-alert',//常用弹框组件
})

require(['jquery'],function($){
    require(['liAlert'],function(){
      $('.alert').on('click',function(event){
        $.alert({
          content: '<h1 style="display:flex;justify-content:center;">我是弹框</h1>',
          effect: $(event.currentTarget).attr('data-flag'),
          blankclose: true,
          //autoClose: true
        })
      })
    })
  })

弹框效果

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注