check多级选择

{include file="include/header.html"}
	 	<div class="j_spinner" style="width:100%;height:100%;background: rgba(0,0,0,0.2);position: fixed;display: none;left:0;top:0;">
		    <div class="spinner">
				<div class="rect1 react"></div>
				<div class="rect2 react"></div>
				<div class="rect3 react"></div>
				<div class="rect4 react"></div>
				<div class="rect5 react"></div>
			</div>
		</div>
		<div class="wrap clearx">
			<!--导航-->
				{include file="include/left.html"}
			<!--右侧修改密码-->
			<div class="rightPart right hlTopic clearx">
				<div class="title-bar clearx">
					<div class="left clearx">
						<span class="left">管理员姓名：{$userinfo.name}</span>
						<span class="left">管理员账号：{$userinfo.phone}</span>
						<span class="left j_orgid" orgid="{$orgid}">所属机构：{$orginfo.name}</span>
			       </div>
			    </div>
			    <div class="quanxianContent clearx">
			    	{if !empty($regiondata)}
			    	<ul class="left">
			    		<li class="clearx liheader">
			    			<div class="J_checkAll check left">-</div>
			    			<p class="left" style="background: none;">全选</p>
			    		</li>
			    		{foreach from=$regiondata item=$one}
			    		<li class="liList">
			    			<div class="J_check check left" pid="{$one.area_id}">-</div>
			    			<p class="left j_area" pid="{$one.area_id}">{$one.name}</p>
			    		</li>
			    		{/foreach}
			    	</ul>
			    	{/if}
			    	<ul class="left"></ul>
			    	<ul class="left"></ul>
			    	<ul class="left"></ul>
			    </div>
			    <div style="text-align: center;overflow:hidden;">
			    	<input type="button" class="btn quanxianContentBtn" value="保存">
			    </div>
			</div>
		</div>
	</body>

</html>
<script>
	$(function(){
		//全选
		$(".quanxianContent").on("click",".J_checkAll",function(){
			var ele = $(this);
			var jckecked = ele.parent().siblings().find(".J_check");
			var thatul = ele.parents("ul");
			if(ele.hasClass("checked")){
				thatul.prev().find(".cur").prev().removeClass("checked nocheckAll");
				thatul.nextAll().find(".check").removeClass("checked nocheckAll");
				ele.removeClass("checked nocheckAll");
				jckecked.removeClass("checked nocheckAll");
			}else{
				thatul.prev().find(".cur").prev().addClass("checked").removeClass("nocheckAll");
				thatul.nextAll().find(".check").addClass("checked").removeClass("nocheckAll");
				ele.addClass("checked");
				jckecked.addClass("checked");
			}
			isCheckedAll(ele);
		});
		//复选框
		$(".quanxianContent").on("click",".J_check",function(){
			var ele = $(this);
			var eleUl = ele.parents("ul");
			var eleNextall = eleUl.nextAll();
			var eleulCheck = eleNextall.find(".J_check");
			var eleulCheckAll = eleNextall.find(".J_checkAll");
			G.common.isCheck(ele);
			//此级(展开状态)并选中子级全选
			if(ele.next().hasClass("cur")){
				ele.removeClass("nocheckAll");
				if(ele.hasClass("checked")){
					eleulCheck.addClass("checked");
					eleulCheckAll.addClass("checked");
				}else{
					eleulCheck.removeClass("checked nocheckAll");
					eleulCheckAll.removeClass("checked nocheckAll");
				}
			}
			var eleliList = eleUl.find(".liList");
			var len = eleliList.length;
			var length = eleliList.find(".checked").length;	
			//此级目录全没有选中
			if(length === 0){
				//此级的上一级（ul li）有选中的
				if(eleliList.find(".nocheckAll").length != 0){
					eleUl.find(".J_checkAll").removeClass("checked").addClass("nocheckAll");
					eleUl.prev().find(".cur").prev().removeClass("checked").addClass("nocheckAll");
				}else{
					eleUl.find(".J_checkAll").removeClass("checked nocheckAll");
					eleUl.prevAll().find(".cur").prev().removeClass("checked nocheckAll");
				}
			}else{
				if(len == length){
					eleUl.find(".J_checkAll").addClass("checked").removeClass("nocheckAll");
					eleUl.prev().find(".cur").prev().addClass("checked").removeClass("nocheckAll");
				}else{
					if(eleliList.find(".nocheckAll").length === 0){
						eleUl.find(".J_checkAll").removeClass("checked").addClass("nocheckAll");
						eleUl.prev().find(".cur").prev().removeClass("checked").addClass("nocheckAll");
					}
				}
			}
			isCheckedAll(ele);
		});

		//子级的父级是否应该全选
		function isCheckedAll(that){
			var eleliLists = that.parents("ul").prev().find(".liList");
			var lens = eleliLists.length;
			var lengths = eleliLists.find(".nocheckAll").length;
			var lengthss = eleliLists.find(".checked").length;
			//判断是否全选
			if(lengths>0){
				that.parents("ul").prevAll().find(".J_checkAll").removeClass("checked").addClass("nocheckAll");
				that.parents("ul").prevAll().find(".cur").prev().removeClass("checked").addClass("nocheckAll");
			}else{
				if(lengthss == lens){
					that.parents("ul").prev().find(".J_checkAll").addClass("checked").removeClass("nocheckAll");
					that.parents("ul").prevAll().find(".cur").prev().addClass("checked").removeClass("nocheckAll");
				}else{
					that.parents("ul").prev().find(".J_checkAll").removeClass("checked").addClass("nocheckAll");
					if(that.parents("ul").prev().find(".J_checkAll").hasClass("nocheckAll")){
						that.parents("ul").prev().prev().find(".cur").prev().removeClass("checked").addClass("nocheckAll");
					}
				}
				if(lengthss === 0){
					that.parents("ul").prevAll().find(".J_checkAll").removeClass("checked nocheckAll");
					that.parents("ul").prevAll().find(".cur").prev().removeClass("checked nocheckAll");
				}
				
			}
		};

		//选择地区
		$(".quanxianContent").on("click",".j_area",function(){
			var _this = $(this);
			getListData(_this,"getprovince.php","areaid","j_province");
		});
		//选择市区
		$(".quanxianContent").on("click",".j_province",function(){
			var _this = $(this);
			getListData(_this,"getcampusnamesbycity.php","pid","bgnone");
		});
		// //选择城市
		// $(".quanxianContent").on("click",".j_city",function(){
		// 	var _this = $(this);
		// 	getListData(_this,"getcampusnamesbycity.php","cid","bgnone");
		// });
		//点击保存
		$(".quanxianContentBtn").click(function(){
			alert(1)
		});
		//获取下级列表函数
		function getListData(_this,url,param,classflag){
			$(".j_spinner").show();
			var checked; 
			if(_this.siblings().hasClass("checked")){
				checked = "checked"
			}else{
				checked = '';
			}
			var areaid = _this.attr("pid");
			var orgids = $(".j_orgid").attr("orgid");
			var params = {};
			params[param] = areaid;
			if(param == "pid"){
				params.orgid = orgids;
			}
			$.post(url,params,function(data){
				var data = JSON.parse(data);
				if(data.code == "10000"){
					$(".j_spinner").hide();
					var datalist = data.data;
					var len = datalist.length;
					var htmlLi = '';
					for(var i = 0;i<len+1;i++){
						if(i === 0){
							htmlLi += '<li class="clearx liheader">'+
				    			'<div class="J_checkAll check '+checked+' left">-</div>'+
				    			'<p class="left" style="background: none;">全选</p>'+
				    		'</li>';
						}else{
							htmlLi += '<li class="liList">'+
				    			'<div class="J_check check '+checked+' left" pid="'+datalist[i-1].id+'">-</div>'+
				    			'<p class="left '+classflag+'" pid="'+datalist[i-1].id+'">'+datalist[i-1].name+'</p>'+
				    		'</li>'
						}
					}
					_this.parents("ul").nextAll().empty();
					_this.parents("ul").next().html(htmlLi);
					_this.addClass("cur").parent().siblings().find("p").removeClass("cur");
				}else{
					$(".j_spinner").hide();
					G.alert({
						"title":"提示",
						"pclass":"msgBox",
						"text":data.desc,
						"alert":function(){
							this._remove();
						}
					});
				};
			});
		};
		//数据采集
		function getData(){
			
		};
	});
</script>