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

最新推荐文章于 2024-07-14 02:37:49 发布
最新推荐文章于 2024-07-14 02:37:49 发布
阅读量838 收藏
点赞数
分类专栏： JS JAVA
JAVA 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
JS
1 篇文章 0 订阅
订阅专栏

在网上看到一个下拉浮层效果。具体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就不复制了。

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

 

tiberx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
c#winform下拉多选自定义控件(带全选)
01-04
c#winform下拉多选自定义控件(带全选)，可以自己定义选择项的下拉框
下拉选择，可全选，全不选
11-30
下拉选择，可全选，多选，全不选。 $(function(){ $("select").multiselect(); });
el-select 下拉框全选、多选的几种方式组件_el-select全选
最新发布
2401_84435768的博客
07-14 1344
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
html 全选按钮
weixin_43986060的博客
02-19 6518
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; function checkAll(ck){ var arr=document.getElementsByNam
多选框全选
weixin_33725807的博客
11-01 94
为什么80%的码农都做不了架构师？>>> ...
el-select 下拉框多选实现全选的实现
12-12
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些 方法一：下拉项增加一个【全选】，然后应该有以下几种情况： 下拉选项全都勾选时，【全选】自动勾选； 下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选； 下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选； 下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了； 上面就是我要实现的功能，我好啰嗦。。。还是看代码吧。。。 html部分： <el-select multiple collapse-tag
html+javascript+bootstrap实现层级多选框全层全选和多选功能
11-27
本篇将详细介绍如何实现这种层级多选框的全层全选和多选功能。 首先，我们需要理解基本的HTML结构。在这种情况下，我们可以使用`<ul>`和`<li>`元素来表示层级关系，每个层级的顶级选项是一个复选框，子级选项也是复...
tkinter自定义多选下拉列表框（带滚动条，全选）
06-28
本篇文章将深入探讨如何使用`tkinter`来实现一个自定义的多选下拉列表框，该列表框具备滚动条功能以及全选选项。这在创建复杂的用户界面时尤其有用，因为它提供了更好的用户体验和更丰富的交互性。 首先，我们要...
bootstrap下拉多选框
01-13
在Bootstrap中，下拉多选框是实现用户界面交互时常见的一种元素，尤其在数据筛选、选项选择等场景下非常实用。Bootstrap本身并没有内置专门的多选下拉框组件，但通过扩展或第三方插件，我们可以轻松地实现这一功能。...
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
select复选框带全选
03-14
在Bootstrap中，"select复选框"通常指的是一个下拉选择列表，其中包含多个可选的选项，用户可以通过勾选这些选项来做出选择。本篇文章将深入探讨如何在Bootstrap中实现带有全选功能的select复选框，以及相关的技术...
combobox实现下拉框多选
01-29
本方法和用checkbox, listbox等控件和事件拼凑出来的不同，本方法是一个集成的独立控件，基本实现了控件的顺滑度，下拉框可悬浮等效果，可以认为是comboBox的升级版，使用方便，仅需引用编译好的DLL，直接在toolBox拖拽出控件即可。
使用Power Apps实现SharePoint Online列表的下拉菜单的级联选择
shrenk的专栏
04-23 6978
在SharePoint列表中添加数据的时候，下拉菜单的级联选择一直是一个非常实用的功能，尤其是有很多数据的情况，级联选择可以根据上一层的选择，自动过滤下一层的选择，方便用户查找和选择准确的信息。一个最常用的情景是选择供应商的地区和国家，例如有三个列表，一个是供应商所在的大洲，一个是国家，一个是供应商。当用户选择州的时候，会自动列出属于这个州的国家。避免用户迷失在大量的数据中。 这里展示一下如何在...
js多选框全选
小麦先生
07-10 2947
代码  应该可以加个form表单，提交的服务器的数据input的多选框value值是使用“，”隔开的字符串 function ChooseAll(sel, check) {     var objtb = document.getElementById(sel);     var num = objtb.getElementsByTagName("input");     var c
多选框的全选操作
cmyhahh的博客
01-25 402
香蕉 苹果 橙子
多选框全选js
weixin_30781631的博客
01-11 63
多选框全选 html：（引入jquery） 1 //全选 2 <input type='checkbox' id='header-chb' class='header-checkbox' onclick='selectAll(this)'> 3 4 //单选 5 <input type='checkbox' class='row-checkbox' onclic...
ANTD-Vue 多选框全选
weixin_50692948的博客
02-21 741
ANTD-Vue 多选框全选
多选框 全选 问题
技术博客共享
08-31 313
/** * checkbox 全选操作 * @param obj * @param ckName */ function updateCheckbox(obj,ckName){ if(obj.checked == true){ var fir = document.getElementsByName(ckN...
带有全选功能的多选框
yuan5801551的博客
08-29 523
技术：冒泡、change事件、checked属性 冒泡 change事件: checkbox 自带的事件 在选项改变时触发 checked属性: checkbox自带的属性 选中时值为true 反之为false <div id='app'> <label for="num1"><input type="checkbox" name="num" id="...
jQuery简易实现复选框全选全不选功能实例
在实际开发中，当用户需要批量操作多个复选框时，全选全不选功能显得尤为实用。本文提供了一个简单的实例来帮助开发者理解和应用这一功能。 首先，我们看到一个Java服务器端页面的模板，其中包含了HTML结构、JSP...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值