首页 / 脚本样式 / JavaScript / 轻松实现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 --> 

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