复选弹框实现，并显示所选选项

最新推荐文章于 2022-06-17 10:44:50 发布

kirsten_z

最新推荐文章于 2022-06-17 10:44:50 发布

阅读量1.3k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/kirsten_z/article/details/52513162

版权

jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

效果

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

代码块

html片段代码

<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 -->

js片段代码

<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>