先看看效果：
效果
-点击弹出弹框 -点击复选框，已选div中 显示已选中的选项 -再次点击取消选中状态，已选div中 显示的选中选项取消显示 -点击 已选 div中的 选项x图标，取消显示该选项 ，取消相应复选框选中状态 -点击大类，小类取消选中状态，点击小类，选中大类取消选中状态 -最多3个选项可以被选中 -点击x图标关闭弹框 -点击确定按钮显示选择后的结果
代码块
html片段代码
分类：
先看看效果：
-点击弹出弹框 -点击复选框，已选div中 显示已选中的选项 -再次点击取消选中状态，已选div中 显示的选中选项取消显示 -点击 已选 div中的 选项x图标，取消显示该选项 ，取消相应复选框选中状态 -点击大类，小类取消选中状态，点击小类，选中大类取消选中状态 -最多3个选项可以被选中 -点击x图标关闭弹框 -点击确定按钮显示选择后的结果
html片段代码
js片段代码
//刷新保持选中状态
$(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">'
//打开 科室类别选项框
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">'
//清除已选 选项
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();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/45893.html