先看看效果：

效果

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

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