<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>带复选框的多级目录树</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<script language="Javascript">
//通过父来控制子
function fatherCheck(isFather){
var sonCheck = document.getElementById("div"+isFather.id).getElementsByTagName("input");
if(isFather.checked){
for (var i=0; i<sonCheck.length; i++){
sonCheck[i].checked=true;
}
}else{
for (var i=0; i<sonCheck.length; i++){
sonCheck[i].checked=false;
}
}
}
//通过子来控制父
function sonCheck(sonCheck,fatherId){
var father_Id = fatherId.split("_");
//alert(father_Id);
//共4个父节点，收到的fatherId是第四个，即father_Id[0,1,2,3],他父节点的上一个父节点为fatherId[0,1,2]
var all=father_Id.length-1;
for(var i=all;i>=0;i--){//从最后一个父节点开始3,2,1,0
var thisFather=father_Id[0];
for(var j=1;j<=i;j++){//从1,2,3
thisFather+="_"+father_Id[j];
}
//alert(thisFather);
//thisFather是其中一个父节点
var ifCheck=1;
var fathercheck = document.getElementById("div"+thisFather).getElementsByTagName("input");
for (var k=0; k<fathercheck.length; k++){//循环看此父节点中的复选框是否选中
if (fathercheck[k].type=="checkbox"&&!fathercheck[k].checked){//当存在没选中的情况，父节点不被选中并返回
document.getElementById(thisFather).checked=false;
ifCheck=0;
//return;
}
}
//alert(ifCheck);
if(ifCheck==1){
document.getElementById(thisFather).checked=true;
}else{
document.getElementById(thisFather).checked=false;
}
}
}
//同时是子节点和父节点的
function fatherSonCheck(Check,fatherId){
fatherCheck(Check);
sonCheck(Check,fatherId);
}
//显示与隐藏
function ifDisplay(divId){
var ifDisPlay=document.getElementById("div"+divId);
if(ifDisPlay.style.display=="none"){
//alert(0);
document.getElementById("div"+divId).style.display="block";
document.getElementById("img"+divId).src="image//jian.png";
}else{
document.getElementById("div"+divId).style.display="none";
document.getElementById("img"+divId).src="image//jia.png";
}
}
</script>
<img src='image//jia.png' id="img01"/><input type="checkbox" id="01" onclick="fatherCheck(this);"><a onclick="ifDisplay('01');">书籍</a><br>
<div id="div01" style="margin-left:15px;display:none;">
<img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'01');">语文<br>
<img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'01');">数学<br>
<img src='image//jia.png' id="img01_01"/><input type="checkbox" id="01_01" onclick="fatherSonCheck(this,'01');"><a onclick="ifDisplay('01_01');">辅导资料</a><br>
<div id="div01_01" style="margin-left:15px;display:none;">
<img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'01_01');">词典<br>
<img src='image//jia.png' id="img01_01_01"/><input type="checkbox" value="2" id="01_01_01" onclick="fatherSonCheck(this,'01_01');"><a onclick="ifDisplay('01_01_01');">字帖</a><br>
<div id="div01_01_01" style="margin-left:15px;display:none;">
<img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'01_01_01');">小学<br>
<img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'01_01_01');">初中<br>
<img src='image//jia.png' id="img01_01_01_01"/><input type="checkbox" value="2" id="01_01_01_01" onclick="fatherSonCheck(this,'01_01_01');"><a onclick="ifDisplay('01_01_01_01');">高中</a><br>
<div id="div01_01_01_01" style="margin-left:15px;display:none;">
<img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'01_01_01_01');">高一<br>
<img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'01_01_01_01');">高二<br>
</div>
</div>
</div>
</div>
<img src='image//jia.png' id="img02"/><input type="checkbox" id="02" onclick="fatherCheck(this);"><a onclick="ifDisplay('02');">学校</a><br>
<div id="div02" style="margin-left:15px;display:none;">
<img src='image//jia.png' id="img02_01"/><input type="checkbox" id="02_01" onclick="fatherSonCheck(this,'02');"><a onclick="ifDisplay('02_01');">高中</a><br>
<div id="div02_01" style="margin-left:15px;display:none;">
<img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'02_01');">高一<br>
<img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'02_01');">高二<br>
<img src='image//wenben.png'/><input type="checkbox" value="3" onclick="sonCheck(this,'02_01');">高三<br>
</div>
<img src='image//jia.png' id="img02_02"/><input type="checkbox" id="02_02" onclick="fatherSonCheck(this,'02');"><a onclick="ifDisplay('02_02');">初中</a><br>
<div id="div02_02" style="margin-left:15px;display:none;">
<img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'02_02');">高一<br>
<img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'02_02');">高二<br>
<img src='image//wenben.png'/><input type="checkbox" value="3" onclick="sonCheck(this,'02_02');">高三<br>
</div>
<img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'02');">幼儿园<br>
</div>
</body>
</html>
- 1
- 2
- 3
前往页