一个基于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>

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