轻松实现js弹框显示选项

先看看效果：

效果

-点击弹出弹框
-点击复选框，已选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>