欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

下拉多选框的改进,如何加入全选按钮

程序员文章站 2024-01-01 11:56:46
...

在网上看到一个下拉浮层效果。具体URL如下,请尊重原来作者版权哦。

http://www.xwcms.net/webAnnexImages/fileAnnex/20131214/41231/xwcms.html

但是这个效果里面,我发现没有全选按钮,我研究了代码一个下午,经过试验成功加入了,全选按钮。具体添加部分如下:

在jquery.selectlayer.js文件中:

//清空
	$(showid+" .selecteditem .empty").unbind().click(function()
	{
			$(showid+" .selecteditem").css("display","none");
			$(showid+" .selecteditem").html("");
			$(showid+" :checkbox[checked]").parent().css("color","");
			$(showid+" :checkbox[checked]").parent().parent().prev().css("color","");
			$(showid+" :checkbox[checked]").attr('checked',false);							
			SetBoxBg(showid);
			//实现全选
			$(showid+" .OpenFloatBox .a").attr('checked',false);
	});	

在$(objid).click(function()实现,全选按钮事件实现如下:

//全选
			$(showid+" .OpenFloatBox .a").unbind().click(function()
			{
				is_all_select=!is_all_select;
                if(is_all_select){
					//alert("全部选中");
					$(showid+" .OpenFloatBox .b").attr('checked',true);
					CopyItem(showid);
					
				}else{
					//alert("全部没有选中");
					$(showid+" .selecteditem").css("display","none");
			        $(showid+" .selecteditem").html("");
			        $(showid+" :checkbox[checked]").parent().css("color","");
			        $(showid+" :checkbox[checked]").parent().parent().prev().css("color","");
			        $(showid+" :checkbox[checked]").attr('checked',false);							
			        SetBoxBg(showid);
				}				
					
			});	

拷贝函数中补充如下:

//拷贝
function CopyItem(showid){
	var htmlstr='&nbsp;&nbsp;&nbsp;已经选择分类:<span class=\"empty\">[清空已选]</span><br/>';
	$(showid+" .item :checkbox[checked][class='b']").each(function(index){
	htmlstr+="<label><input class=\"b\"  type=\"checkbox\" value=\""+$(this).attr("value")+"\" title=\""+$(this).attr("title")+"\" checked/>"+$(this).attr("title")+"</label>";
	})
	$(showid+" .item :checkbox[checked][class='s']").each(function(index){
	 if ($(this).parent().parent().prev().find(":checkbox").attr('checked')==false)
	 {						 
	htmlstr+="<label><input class=\"s\"  type=\"checkbox\" id=\""+$(this).attr("id")+"\" value=\""+$(this).attr("value")+"\" title=\""+$(this).attr("title")+"\" checked/>"+$(this).attr("title")+"</label>";
	 }
	})
	htmlstr+="<div class=\"clear\"></div>";
	$(showid+" .selecteditem").html(htmlstr);
	if ($(showid+" .item :checkbox[checked]").length>0){
		$(showid+" .selecteditem").css("display","block");
	}else{
		$(showid+" .selecteditem").css("display","none");
	}
	//已选项目绑定click
	$(showid+" .selecteditem :checkbox").unbind().click(function(){
		var selval=$(this).val();
			$(showid+" .item :checkbox[checked]").each(function()
			{
				if ($(this).val()==selval)
				{
					$(this).attr("checked",false);
					if ($(this).attr("class")=="b")
					{
						$(this).parent().next().find(":checkbox").attr("checked",false);
						//实现全选
						if(is_all_select){
							$(showid+" .OpenFloatBox .a").attr('checked',false);
							is_all_select=false;
						}
					}									
					//重新克隆
					CopyItem(showid);
				}	
			})
	});

添加全局变量如下:

var is_all_select=false;

全部JS文件代码如下:

//职位,地区选择弹出层函数
var is_all_select=false;
function OpenCategoryLayer(objid,showid,input_cn,input,QSarr,strlen)
{
	$(objid).click(function()
	{
			
			$(this).blur();
			$(this).parent("div").before("<div class=\"menu_bg_layer\"></div>");
			$(".menu_bg_layer").height($(document).height());
			$(".menu_bg_layer").css({ width: $(document).width(), position: "absolute",left:"0", top:"0","z-index":"0","background-color":"#000000"});
			$(".menu_bg_layer").css("opacity",0);
			$(showid+" .OpenFloatBoxBg").css("opacity", 0.2);
			$(showid).show();			
			$(showid+" .OpenFloatBox").css({"left":($(document).width()-$(showid+" .OpenFloatBox").width())/2,"top":"120","z-index":"999"});
			SetBoxBg(showid);
			$(showid+" .item").unbind().hover(
				function(){
				$(this).find(".titem").addClass("titemhover");				
				var strclass=QSarr[$(this).attr("id")];
				var pid=$(this).attr("id");
				if (strclass)
				{
					$(this).find(".sitem").css("display","block");
					if ($(this).find(".sitem").html()=="")
					{
					$(this).find(".sitem").html(MakeLi(strclass,pid));//生成LI
					}
				}
					$(showid+" .OpenFloatBox label").unbind().click(function()
					{
						if ($(this).attr("title"))
						{
							if ($(this).find(":checkbox").attr('checked'))
							{
							$(this).next().find(":checkbox").attr('checked',true);
							}
							else
							{
							$(this).next().find(":checkbox").attr('checked',false);
							}
						}
						else
						{
							if ($(this).parent().find(":checkbox[checked]").length>0)
							{
								$(this).parent().prev().find(":checkbox").attr('checked',false);
							}
						}
						CopyItem(showid);
					});				
				},
				function(){
				$(this).find(".titem").removeClass("titemhover");
				$(this).find(".sitem").css("display","none");
				}
			);
			$(showid+" .OpenFloatBox .DialogClose").unbind().hover(function(){$(this).addClass("spanhover")},function(){$(this).removeClass("spanhover")});
			$(showid+" .DialogClose").click(function(){DialogClose(showid);});
			//确定选择
			$(showid+" .Set").unbind().click(function()
			{
					SetInput(showid,input_cn,input,strlen);
					
			});	
			//全选
			$(showid+" .OpenFloatBox .a").unbind().click(function()
			{
				is_all_select=!is_all_select;
                if(is_all_select){
					//alert("全部选中");
					$(showid+" .OpenFloatBox .b").attr('checked',true);
					CopyItem(showid);
					
				}else{
					//alert("全部没有选中");
					$(showid+" .selecteditem").css("display","none");
			        $(showid+" .selecteditem").html("");
			        $(showid+" :checkbox[checked]").parent().css("color","");
			        $(showid+" :checkbox[checked]").parent().parent().prev().css("color","");
			        $(showid+" :checkbox[checked]").attr('checked',false);							
			        SetBoxBg(showid);
				}				
					
			});	
			//关闭
			function DialogClose(showid)
			{
				$(".menu_bg_layer").hide();
				$(showid).hide();
			}
			//设置表单
			function SetInput(showid,input_cn,input,strlen)
			{
					var a_cn=new Array();
					var a_id=new Array();
					var i=0;
					/**
					if ($(showid+" .OpenFloatBox .selecteditem :checkbox[checked]").length>8)
					{
						alert("不能超过8个选项");
						return false;
					}
					*/
					$(showid+" .OpenFloatBox .selecteditem :checkbox[checked]").each(function(index)
					{
					    a_cn[index]=$(this).attr("title");	
						if ($(this).attr("class")=="b")
						{
								a_id[i]=$(this).val()+".0";							
						}
						else
						{							
							a_id[i]=$(this).attr("id")+"."+$(this).val();
						}
							i++;
					});
					$(input_cn).val(limit(a_cn.join("+"),strlen));
					if ($(input_cn).val()=="")$(input_cn).val("未选择");
					$(input).val(a_id.join("-"));
					DialogClose(showid);
			}
		
	});	
}
//设置阴影
function SetBoxBg(showid)
{
	var FloatBoxWidth=$(showid+" .OpenFloatBox").width();
	var FloatBoxHeight=$(showid+" .OpenFloatBox").height();
	var FloatBoxLeft=$(showid+" .OpenFloatBox").offset().left;
	var FloatBoxTop=$(showid+" .OpenFloatBox").offset().top;
	$(showid+" .OpenFloatBoxBg").css({display:"block",width:(FloatBoxWidth+12)+"px",height:(FloatBoxHeight+12)+"px"});
	$(showid+" .OpenFloatBoxBg").css({left:(FloatBoxLeft-5)+"px",top:(FloatBoxTop-5)+"px"});
}
//生成小类
function MakeLi(val,pid){
	if (val=="")return false;
	arr=val.split("|");
	var htmlstr='';
		for (x in arr)
		{
		 var v=arr[x].split(",");
		htmlstr+="<label><input type=\"checkbox\" value=\""+v[0]+"\" title=\""+v[1]+"\" class=\"s\" id=\""+pid+"\"/>"+v[1]+"</label><br/>";
		}
	return htmlstr; 
}
//拷贝
function CopyItem(showid){
	var htmlstr='&nbsp;&nbsp;&nbsp;已经选择分类:<span class=\"empty\">[清空已选]</span><br/>';
	$(showid+" .item :checkbox[checked][class='b']").each(function(index){
	htmlstr+="<label><input class=\"b\"  type=\"checkbox\" value=\""+$(this).attr("value")+"\" title=\""+$(this).attr("title")+"\" checked/>"+$(this).attr("title")+"</label>";
	})
	$(showid+" .item :checkbox[checked][class='s']").each(function(index){
	 if ($(this).parent().parent().prev().find(":checkbox").attr('checked')==false)
	 {						 
	htmlstr+="<label><input class=\"s\"  type=\"checkbox\" id=\""+$(this).attr("id")+"\" value=\""+$(this).attr("value")+"\" title=\""+$(this).attr("title")+"\" checked/>"+$(this).attr("title")+"</label>";
	 }
	})
	htmlstr+="<div class=\"clear\"></div>";
	$(showid+" .selecteditem").html(htmlstr);
	if ($(showid+" .item :checkbox[checked]").length>0){
		$(showid+" .selecteditem").css("display","block");
	}else{
		$(showid+" .selecteditem").css("display","none");
	}
	//已选项目绑定click
	$(showid+" .selecteditem :checkbox").unbind().click(function(){
		var selval=$(this).val();
			$(showid+" .item :checkbox[checked]").each(function()
			{
				if ($(this).val()==selval)
				{
					$(this).attr("checked",false);
					if ($(this).attr("class")=="b")
					{
						$(this).parent().next().find(":checkbox").attr("checked",false);
						//实现全选
						if(is_all_select){
							$(showid+" .OpenFloatBox .a").attr('checked',false);
							is_all_select=false;
						}
					}									
					//重新克隆
					CopyItem(showid);
				}	
			})
	});
	$(showid+" .OpenFloatBox .item label :checkbox").parent().css("color","");
	$(showid+" .OpenFloatBox .item label :checkbox[checked]").parent().css("color","#FF6600");
	$(showid+" .OpenFloatBox .sitem :checkbox[checked]").each(function(index){
		$(this).parent().parent().prev().css("color","#FF6600");
	});
	SetBoxBg(showid);
	//清空
	$(showid+" .selecteditem .empty").unbind().click(function()
	{
			$(showid+" .selecteditem").css("display","none");
			$(showid+" .selecteditem").html("");
			$(showid+" :checkbox[checked]").parent().css("color","");
			$(showid+" :checkbox[checked]").parent().parent().prev().css("color","");
			$(showid+" :checkbox[checked]").attr('checked',false);							
			SetBoxBg(showid);
			//实现全选
			$(showid+" .OpenFloatBox .a").attr('checked',false);
	});	
}
//截取字符
function limit(objString,num)
{
	var objLength =objString.length;
	if(objLength > num){ 
	return objString.substring(0,num) + "...";
	} 
	return objString;
}

前端HTML页面改动如下:

<div class="tip"><label title="全选" class="titem"><input type="checkbox" value="0" title="全选" class="a">全选</label></div>

只需要修改div class tip层。全部HTML就不复制了。

希望我的研究可以给原作添砖加瓦,能够得到更多分享。同时致敬原作者。

 

上一篇:

下一篇: