一个基于jQuery的多选树形结构

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  	ul,ul li{
  		list-style: none;
  	}
  </style>
 </head>
 <body>
 	<ul>
 		<li class="node"><input type="checkbox" name="box">权限管理
 			<ul>
 				<li class="node"><input type="checkbox" name="box">档案管理
 					<ul>
		 				<li class="node"><input type="checkbox" name="box">档案管理</li>
		 				<li class="node"><input type="checkbox" name="box">销售查询</li>
		 				<li class="node"><input type="checkbox" name="box">出库管理</li>
		 			</ul>
 				</li>
 				<li class="node"><input type="checkbox" name="box">销售查询
 					<ul>
		 				<li class="node"><input type="checkbox" name="box">档案管理</li>
		 				<li class="node"><input type="checkbox" name="box">销售查询</li>
		 				<li class="node"><input type="checkbox" name="box">出库管理</li>
		 			</ul>
 				</li>
 				<li class="node"><input type="checkbox" name="box">出库管理
 					<ul>
		 				<li class="node"><input type="checkbox" name="box">档案管理</li>
		 				<li class="node"><input type="checkbox" name="box">销售查询</li>
		 				<li class="node"><input type="checkbox" name="box">出库管理</li>
		 			</ul>
 				</li>
 			</ul>
 		</li>
 	</ul>
 	
  <script type="text/javascript" src="../js/jquery.min.js" ></script>
  <script type="text/javascript">
	$(function(){
		$(".node>input").click(function() {
			var checkedval = this.checked;	//获取点击是选中还是取消选中  选中==true 取消选中==false
			$(this).parent("li").find("input").prop("checked",checkedval);	//设置选中内容的子节点是选中还是取消选中
			if(checkedval){		//这个是与父节点关联的   如果这个是true  就选中他的所有的父节点
				$(this).parents('.node').children("input").prop("checked",checkedval); 
			}else{		//否则的话就判断他的兄弟节点是否是全部都取消了选中  如果是  就取消父节点的选中    如果否则父节点就不用更改
				//获取当前节点的所有的兄弟节点     
				//扩展一下:prev()获取前一个兄弟节点    next()获取后面一个兄弟节点    prevAll()获取前面所有的兄弟节点  nextAll()获取后面的所有的兄弟节点
				var arr = $(this).parent("li").siblings();	    
				var check = false;	//设置一个默认值  用来判断是否改变父节点的选中
				//for循环所有的兄弟节点   看看是否有选中的兄弟节点
				for(var i=0;i<arr.length;i++){
					var bool = $(arr[i]).children("input").is(':checked');
					if(bool){	//如果兄弟节点是选中状态  给check赋值,代表父节点不做修改
						check = bool;
					}
				}
				//如果所有的兄弟节点都是未选中的话  就取消父节点的选中状态
				if(!check){
					$(this).parents('.node').children("input").prop("checked",checkedval); 
				}
			}
		});
		
	});
	
  </script>
 </body>
</html>

实现了选中子节点,父节点默认选中,选中父节点,所有的子节点默认选中,取消选中所有的子节点,父节点也随之取消选中!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

异常的昵称

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值