animate,clone,event 三級聯動 Jquery

時間 2019-12-07

標籤 animate clone event 三級聯動 jquery 欄目 JQuery 简体版

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>animate,clone,event...做業.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">
.grand {
	font-family: 微軟雅黑;
	font-size: 20px; width : 1000px;
	margin: 0 auto;
	width: 1000px;
}

.grand div {
	padding-top: 5px;
	padding-left: 10px;
}

.grand input {
	width: 18px;
	height: 18px
}
</style>

<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
	  $(":checkbox").click(function() {
		//當前點擊的一代某個體選中，其後代全選中
		var id = $(this).attr("id");
		$(":checkbox[id^=" + id + "]").prop("checked",$(this).prop("checked"));
		
		//逐代向上循環
		for(var l=id.length-2;l>0;l=l-2){		
		   var par_id = id.substring(0, l);//當前循環到的一代的上1級先代ID
		   //當前一代某個體選中，其先代選中
		   if($(":checkbox[id=" + id + "]").prop("checked")==true){
		      $(":checkbox[id=" + par_id + "]").prop("checked",true);
		   }
		   //當前一代全都取消選中，其上一級先代取消選中
		   var allChecked = false;       
           $(":checkbox[id^="+par_id+"_]").each(function(){
              if($(this).prop("checked")){  
                 allChecked = true;
              }     
           });
           $(":checkbox[id=" + par_id + "]").prop("checked",allChecked);	
		}				            						
		});
    });
</script>
</head>

<body>
	<div class="grand">
		<input id="1" type="checkbox">爺爺
		<div class="father">
			<div>
				<input id="1_1" type="checkbox">爸爸1
				<div class="son1">
					<div>
						<input id="1_1_1" type="checkbox">孫1
					</div>
					<div>
						<input id="1_1_2" type="checkbox">孫2
					</div>
				</div>
			</div>
			<div>
				<input id="1_2" type="checkbox">爸爸2
				<div class="son2">
					<div>
						<input id="1_2_1" type="checkbox">孫3
					</div>
					<div>
						<input id="1_2_2" type="checkbox">孫4
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。