<!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>
