轻松实现js弹框显示选项

效果

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

代码块

html片段代码

<div> <label>科室分类：</label> <div> <input type="hidden" @if(Input::has('cg_str')) value="{{Input::get('cg_str')}}" @endif /> <input type="text" @if(Input::has('type')) value="{{Input::get('type')}}" @endif/> </div> </div> <!-- 科室类型start --> <div> <div></div> <div> <div> <ul> <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><a></a></li> </ul> <div></div> </div> <div > <!-- 临床医学-S --> <div> <!-- 内科-S --> <div> <input type="checkbox" value="4" parent="1"/> <label>内科</label> <div></div> </div> @foreach($oLcyx1 as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> <!-- 内科-E --> <!-- 外科-S --> <div> <input type="checkbox" value="5" parent="1"/> <label>外科</label> <div></div> </div> @foreach($oLcyx2 as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> <!-- 外科-E --> <!-- 其他-S --> <div> <input type="checkbox" value="6" parent="1"/> <label>其他</label> <div></div> </div> @foreach($oLcyx3 as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> <!-- 其他-E --> </div> <!-- 临床医学 -E --> <!-- 辅助科室-S --> <div> <div> <div></div> </div> @foreach($oFzks as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> </div> <!-- 辅助科室-E --> <!-- 医药公司-S --> <div> <div> <div></div> </div> @foreach($oYygs as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> </div> <!-- 医药公司-E --> </div> <!-- 信息选中后出现的位置-S --> <div> <div> <div>已选：</div> <div> <div></div> </div> <div></div> </div> <div> <input type="button" value="确定"/> </div> </div> <!-- 信息选中后出现的位置-E --> <!--信息提示--> <div>最多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 + 'https://www.jb51.net/'; type = $("#type").val() + '+'; } str = str.split("https://www.jb51.net/"); 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>' + '<div>' + labelVal + '</div>' + '<div>' + '<a href="javascript:void(0);"></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 + 'https://www.jb51.net/', ""); type = type.replace(lab + '+', ""); num--; } }); } }); //判断num值 if(num > 3){ $('#msg').html("最多3个选项"); $('#msg').fadeIn(); setTimeout(function(){$('#msg').fadeOut();},1000); return false; } cg_str += Val + 'https://www.jb51.net/'; type += labelVal + '+'; //放置到已选div 中 var html = '<div>' + '<div>' + labelVal + '</div>' + '<div>' + '<a href="javascript:void(0);"></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 + 'https://www.jb51.net/', ""); 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 + 'https://www.jb51.net/', ""); 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>