jquery实现分级栏目复选框，下拉复选框

最新推荐文章于 2026-05-29 14:49:51 发布
原创 最新推荐文章于 2026-05-29 14:49:51 发布 · 610 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
HTML+JS+CSS

当前文章被收录于：

HTML+JS+CSS
2 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了一种在网页中实现下拉复选框的方法，通过HTML、CSS和JavaScript（使用jQuery库）来创建一个多级栏目复选框，支持全选、取消全选以及根据子项状态更新父项状态的功能。

下拉复选框

做了一个简单的层级栏目复选框选择，主要功能有：

  • 点击全部选中所有，取消全部取消所有
  • 点击父级选中所有子级，取消父级取消所有子级
  • 取消子级选中，直接和间接父级都取消选中，子级不变
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟实现下拉复选框</title>
		<style>
			.select{
				width: 90%;
				height:100px;
				margin:0px 10px 10px 10px;
				text-align:left;
				border:2px solid #CCCCCC;
				overflow-y:scroll; 
				overflow-x:hidden;
				table-layout: fixed;
				word-wrap:break-word;
				word-break:break-all;
			}
		</style>
		<script src="js/jquery.min1.8.3.js"></script>
		<script src="js/jquery-ui.min1.12.1.js"></script>
		<link rel="stylesheet" href="js/jquery-ui.min1.12.1.css"/>
		<link rel="stylesheet" href="js/jquery-ui.theme.min1.12.1.css"/>
		<script>
			$(function() {
				//栏目权限对话框
				$("#channelDialog").dialog({
					autoOpen: false,
					modal: true,
					width: 280,
					height: 420,
					position: ["center",20],
					buttons: {
						"OK": function() {
							$(this).dialog("close");
						}
					},
					close: function(event, ui) {
						//将列表框中已选中的项复制到隐藏表单中
						var s="";
						$("#channels0"+" input").each(function(){
							if($(this).attr("checked")) {
								s += "<input type='hidden' name='channelIds' value='" +$(this).val()+ "'/>";
							}
						});
					}
				});
				var channels_opened_0 = false;
				$('#channel0').click(function(){
					//第一次打开，需要获取数据。	
					if(!channels_opened_0) {
						//获取数据
						/* $.get("url",{"siteId":1,"userId":1},function(s) {
							$(s).appendTo("#channels0");
						}); */
						channels_opened_0 = true;
					}
					$('#channelDialog').dialog('open');
					return false;
				});	
			});

			function allChannels(chk,i) {
				if(chk) {
						$("#channels"+i+" input").attr("checked",true);
					}else{
						$("#channels"+i+" input").attr("checked",false);
					} 
			}
			
			function f(e){
				//低级栏目下的选中和取消
				if ($(e).attr("checked")) {
					//获取选中的栏目父节点div
					var parent=$(e).parent();
					//获取节点内容
					var content=parent[0].innerHTML;
					//判断级别
					var count=content.split("&nbsp;").length-1;
					while (parent.next()) {
						//获取下一个子栏目
						var nextbrother=parent.next();
						var brothercontent=nextbrother[0].innerHTML;
						var brothercount=brothercontent.split("&nbsp;").length-1;
						//当前栏目的级数在选中栏目的下面，进行选中子栏目
						if (count<brothercount) {
							nextbrother.children().each(function(){
								if(!($(this).attr("checked"))) {
									$(this).attr("checked",true);
								}
							});
						}else {
							break;
						}
						parent=nextbrother;
					}
				}else{
					//获取取消选中的栏目父节点div
					var parent=$(e).parent();
					//获取节点内容
					var content=parent[0].innerHTML;
					//判断级别
					var count=content.split("&nbsp;").length-1;
					while (parent.next()) {
						//获取下一个子栏目
						var nextbrother=parent.next();
						var brothercontent=nextbrother[0].innerHTML;
						var brothercount=brothercontent.split("&nbsp;").length-1;
						//当前栏目的级数在选中栏目的下面，进行取消选中子栏目
						if (count<brothercount) {
							nextbrother.children().each(function(){
								if($(this).attr("checked")) {
									$(this).attr("checked",false);
								}
							});
						}else {
							break;
						}
						parent=nextbrother;
					}
					
					//判断上一级栏目是否还被选中，需要取消，因为子级栏目已经存在没选中的
					parent=$(e).parent();
					while (parent.prev()) {
						//获取上一个子栏目
						var nextbrother=parent.prev();
						var brothercontent=nextbrother[0].innerHTML;
						var brothercount=brothercontent.split("&nbsp;").length-1;
						//当前栏目的父栏目如果还是选中状态，取消选中
						if (count-2==brothercount) {
							nextbrother.children().each(function(){
								if($(this).attr("checked")) {
									$(this).attr("checked",false);
								}
							});
							//继续父级栏目的父级栏目
							count=count-2;
						}
						parent=nextbrother;
					}
					
				}
			}
		</script>
	</head>
	<body>
		<input  id="channel0" type="button" value="弹出下拉复选框"/>
		<div id="channelDialog" style="display:none;">
			<label><input type="checkbox" onclick="allChannels(this.checked,0)" />选择全部</label>
			<div class="select" id="channels0">
				<div><input type="checkbox" value="1" onclick="f(this)" />1</div>
				<div><input type="checkbox" value="2" onclick="f(this)" />&nbsp; &nbsp;2</div>
				<div><input type="checkbox" value="3" onclick="f(this)" />&nbsp; &nbsp;3</div>
				<div><input type="checkbox" value="4" onclick="f(this)" />&nbsp; &nbsp;4</div>
				<div><input type="checkbox" value="5" onclick="f(this)" />&nbsp; &nbsp;&nbsp; &nbsp;5</div>
				<div><input type="checkbox" value="6" onclick="f(this)" />&nbsp; &nbsp;6</div>
			</div>

			<input type="checkbox" value="7" />7
		</div>
	</body>
</html>

效果图：比较简单主要是解决select中无法添加复选框，自己模拟一个，样式可以自己调整：
在这里插入图片描述
改进层级菜单复选框功能：

  • 可以根据子栏目的状态决定父栏目是否选中
  • 上面的功能也保留，这是增强版
  • 没有使用递归，看起来会比较容易，但有很多重复
function f(e){
	//低级栏目下的选中和取消
	if ($(e).attr("checked")) {
		//获取选中的栏目父节点div
		var parent=$(e).parent();
		//获取节点内容
		var content=parent[0].innerHTML;
		//判断级别
		var count=content.split("&nbsp;").length-1;
		while (parent.next()&&parent.next().length>0) {
			//获取下一个子栏目
			let nextbrother=parent.next();
			let brothercontent=nextbrother[0].innerHTML;
			let brothercount=brothercontent.split("&nbsp;").length-1;
			//当前栏目的级数在选中栏目的下面，进行选中子栏目
			if (count<brothercount) {
				nextbrother.children().each(function(){
					if(!($(this).attr("checked"))) {
						$(this).attr("checked",true);
					}
				});
			}else {
				break;
			}
			parent=nextbrother;
		}
		
		//判断上一级栏目是否没被选中，需要选中，因为子级栏目存在选中的
		parent=$(e).parent();
		while (parent.prev() && parent.prev().length>0) {
			//获取上一个子栏目
			let nextbrother=parent.prev();
			let brothercontent=nextbrother[0].innerHTML;
			let brothercount=brothercontent.split("&nbsp;").length-1;
			//当前栏目的父栏目如果不是是选中状态，选中
			if (count-2==brothercount) {
				nextbrother.children().each(function(){
					if(!$(this).attr("checked")) {
						$(this).attr("checked",true);
					}
				});
				//继续父级栏目的父级栏目
				count=count-2;
			}
			parent=nextbrother;
		}
	}else{
		//获取取消选中的栏目父节点div
		var parent=$(e).parent();
		//获取节点内容
		var content=parent[0].innerHTML;
		//判断级别
		var count=content.split("&nbsp;").length-1;
		while (parent.next() && parent.next().length>0) {
			//获取下一个子栏目
			let nextbrother=parent.next();
			let brothercontent=nextbrother[0].innerHTML;
			let brothercount=brothercontent.split("&nbsp;").length-1;
			//当前栏目的级数在选中栏目的下面，进行取消选中子栏目
			if (count<brothercount) {
				nextbrother.children().each(function(){
					if($(this).attr("checked")) {
						$(this).attr("checked",false);
					}
				});
			}else {
				break;
			}
			parent=nextbrother;
		}
		
		//判断当前栏目中有没有选中的，没有取消父级栏目选中
		parent=$(e).parent();
		while (parent.prev() && parent.prev().length>0) {
			//获取上一个子栏目
			let nextbrother=parent.prev();
			let brothercontent=nextbrother[0].innerHTML;
			let brothercount=brothercontent.split("&nbsp;").length-1;
			//当前栏目的父栏目如果是选中状态，选中判断子栏目中是否存在选中的，不存在取消选中
			if (count-2==brothercount) {
				nextbrother.children().each(function(){
					if($(this).attr("checked")) {
						//是否存在选中的判断符
						let isCheck=false;
						let parentchilrden=nextbrother;
						let countchildren=count-2;
						while (parentchilrden.next() && parentchilrden.next().length>0){
							//获取下一个子栏目
							let nextbrotherchildren=parentchilrden.next();
							if (nextbrotherchildren[0]==null) {
								break;
							}
							let brothercontentchildren=nextbrotherchildren[0].innerHTML;
							let brothercountchildren=brothercontentchildren.split("&nbsp;").length-1;
							//当前栏目的级数在选中栏目的下面，进行取消选中子栏目
							if (countchildren<brothercountchildren) {
								nextbrotherchildren.children().each(function(){
									if($(this).attr("checked")) {
										isCheck=true;
										//break;
									}
								});
							}else {
								break;
							}
							parentchilrden=nextbrotherchildren;
						}
						if (isCheck) {
							$(this).attr("checked",true);
						}else{
							$(this).attr("checked",false);
						}	
					}
				});
				//继续父级栏目的父级栏目
				count=count-2;
			}
			parent=nextbrother;
		} 
	}
}
标签
#js #jquery
jquery实现下拉复选框
03-31
一个js的方法，调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法： * (1)调用js函数：setSelectBox(textItem, myArray); * 参数说明： * textItem：input表单元素 * myArray：二维数组，存放下拉框中的key-value对。 * (2)特别说明：全局变量均以_开头，有如下2个，使用时注意命名冲突： _csidiv _csiinput * (3)使用实例： <html> <head> <title>my test</title> [removed][removed] [removed][removed] [removed] function testSelectBox(textItem) { var myArray = new Array(); myArray['one'] = 1; myArray['two'] = 2; myArray['three'] = 3; myArray['4'] = 4; myArray['5'] = 5; myArray['6'] = 6; myArray['7'] = 7; myArray['8'] = 8; setSelectBox(textItem, myArray); } [removed] </head> <body> <form id="mainForm"> 实例 在此控件下方显示下拉复选框 <input id="input" /> <input type="button" id="Text1" /> </form> </body> </html> */
jQuery实现下拉列表复选框 可多选
qdulgh的专栏
09-02 4860
jQuery实现下拉列表复选框，可多选, 将选择的value值以逗号隔开，存到input文本框 id=checkedVal。取消选择时，采用直接替换为空的方式删除，适用于选项值无重复的情况。
jquery-ui的dialog中select弹出内容显示在对话框之后的解决办法
my_live_123
03-17 1302
0.组件 jqueryui 的Selectmenu和dialog控件的组合使用 1.现象 如果在html中静态写入的控件，然后在dialog中显示它，那么select的下拉框会被对话框覆盖。 2. 原因 Its a z-index problem. When you use multiple jquery UI component, jquery library starts adding z-...
Keil µVision调试窗口调整导致的内存访问问题解析
最新发布
weixin_30443731的博客
05-29 416
在嵌入式系统调试过程中，内存访问是核心调试操作之一，它直接影响调试效率和系统稳定性。调试器通过特定协议与目标系统通信，实现内存读写、寄存器监控等功能。Keil µVision作为主流嵌入式开发环境，其窗口重绘机制在调整大小时会强制触发内存访问，即使关闭了周期性更新功能。这种现象在实时系统调试中尤为危险，可能导致外设状态意外改变或关键数据被覆盖。通过锁定Memory窗口、暂停目标系统等工程实践方法，可以有效避免非预期内存访问。掌握这些调试技巧对嵌入式开发人员至关重要，特别是在DMA传输调试、中断服务程序分析等
基于jqueryUI的dialog实现弹出框与回调方法
weixin_46179373的博客
07-18 1530
功能描述：冷库公司需要对预约订单指派送冰员。 效果如下： 支持批量处理 Ice控制器 public function actionSetShrIdAndName($oId,$shrId){ $shr=User::model()->find('userId='.$shrId);//根据送货人ID找到该用户信息 $order=Ice::model()->findAll("id in (".$oId.")");//找订单 if($order){
JQuery实现动态加载复选框
qq_40312160的博客
09-05 7149
效果如图，通过ajax接收的数据，动态生成想要的日期 在网上查找一番后，参考别人的代码，记录下来，方便以后查阅 引入的js包 jquery.easyui.min.js jquery.min.js （一）在body总添加div标签 &lt;div id="allTime"&gt;&lt;/div&gt;  （二）js代码 function show(){ var row ...
jquery下拉框，单选框，复选框
lianpengyan_0719的专栏
03-27 684
下拉框：//得到下拉菜单的选中项的文本(注意中间有空格)var cc1 = $(".formc select[@name=country] option[@selected]").text();//得到下拉菜单的选中项的值var cc2 = $(.formc select[@name="country"]).val();//得到下拉菜单的选中项的ID属性值var cc3 = $(
JQuery下拉框与复选框
热门推荐
linwei_1029的专栏
02-25 1万+
 1. 先看下一个例子： 首先是一个下拉框      选择资源类型： HTML页面      HTML页面   下载资源   超链接资源   自测题   课件资源   问卷调查   FAQ   文本及附件    之后，通过$(document).ready(function(){  $("#s1").change(function(){   $("#chan
使用jQuery编写兼容ie8的多选下拉框搜索过滤
blog.aiheadn.cn
06-01 673
之前在公司碰到一个业务，需要使用一个下拉框带搜索过滤功能，并且支持回显，将已经失效的数据进行提示。所以需要手写一个下拉框，该下拉框可自由配置，使用jq编写组件同时需要兼容浏览器ie8及以上。
jQuery单选，多选，下拉框选中相关
qq_21747731的专栏
05-07 627
一、获取值： 文本框，文本区域： $("#txt").attr("value")； 多选框 checkbox： $("#checkbox_id").attr("value")； 单选组radio： $("input[type=radio][checked]").val(); 下拉框select： $('#sel').val(); 二、radio取值，chec...
JQ模拟下拉框多选
Bright2017的博客
11-08 1276
JQ模拟下拉框多选
jq 多项下拉菜单选项卡
Q雨中漫步Q的博客
05-06 704
html5 <div class="nav-maiche"> <ul class="navulmaiche"> <li> 111 </li> <li> 2222 </li> <li> 33333 &l...
使用JQuery技术实现简单树形结构（带复选框）
Hard042的博客
10-19 3965
参考：https://blog.csdn.net/u011113654/article/details/49853271  一、实现的具体功能 1、最左边的图形按钮实现子目录的隐藏和显示 2、点击父节点的复选框，父节点下的所有的子节点都被选中；若父节点未选中，则下面的所有子节点取消选中(全选和全不选) 3、选中一个子节点时相应的父节点也被选中；当所有的子节点都没有选中时，父节点也取消选...
一个简单的实现下拉框多选的插件
qinchaoguang123456的专栏
05-04 959
在使用上次写的一个多先下拉框时，我发现了很多问题
multipleSelect下拉插件的使用
qq_45894929的博客
06-15 1358
Multiple Select 是一个通过复选框来选择多元素的 jQuery 插件:). 官网地址:添加链接描述
jquery操作 单选、复选、下拉
zy408710468的专栏
04-09 756
//遍历option和添加、移除option function changeShipMethod(shipping){  var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each(function(){ if
jquery简单多选下拉框
编码青年的专栏
02-27 3850
JS代码：&lt;script language="javascript"&gt; (function () { $.fn.extend({ checks_select: function (options) { jq_checks_select = null; $(this).clic...
jquery操作复选框、单选框、下拉列表框
系统运维
03-20 304
以前在开发前端表单验证时，会经常使用到jquery来做验证，但是有一些表单的获取、设置、指定操作比较麻烦，有时会经常查文档，今天闲来无事，便把几个常用的表单汇总了翻。先上效果图 jquery操作复选框、单选框、下拉列表框 不多说，贴上源码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...
Js实现下拉复选功能
Java小爬虫
11-05 7921
Js实现下拉复选功能    推荐一个很好用的js实现下拉复选框的功能，纯js实现的，不需要引入样式表，使用起来方便快捷。    代码如下： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;Js实现下拉复选功能&lt
vue3三级嵌套复选框（element-plus）
weixin_62639453的博客
03-05 1621
当选择第一级的复选框时下面所有内容全选和取消全选，当选择第二的复选框时第三级的所有内容全选和取消全选。只要有一个第三级的内容没有选，二级和一级则不能勾上。第三级内容全选上了，第二级复选框就钩上。第二级也是同样的道理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值