这是别人写的树状checkbox，我不知道我想要的效果如何实现-----急急急

<HTML>
<HEAD>
<TITLE> emu's test of simple tree</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkSelect(){
var elm = event.srcElement.parentNode;
checkChildrenRecurve(elm);
checkRootRecurve(document.getElementById("root"));
checkChildrenClear(elm);
}
function checkChildrenRecurve(elm){
var li = elm.parentNode;
var ul = li.lastChild; 
if (ul.tagName != "UL") return;
var lis = ul.children;
for (var i=0;i<lis.length;i++){
lis[i].firstChild.firstChild.checked=elm.firstChild.checked;
checkChildrenRecurve(lis[i].firstChild)
}
}
function checkChildrenClear(elm){
var li = elm.parentNode;
var ul = li.lastChild; 
if (ul.tagName != "UL") return;
var lis = ul.children;
for (var i=0;i<lis.length;i++){
lis[i].firstChild.firstChild.checked=false;
checkChildrenRecurve(lis[i].firstChild)
}
}
function checkRootRecurve(ul){
if (ul.tagName != "UL") {
ul.parentNode.firstChild.firstChild.allChecked = ul.parentNode.firstChild.firstChild.checked;
ul.parentNode.firstChild.firstChild.allUnChecked = !ul.parentNode.firstChild.firstChild.checked;
return;
}
var lis = ul.children;
var allChecked = true;
var allUnChecked = true;
for (var i=0;i<lis.length;i++){
checkRootRecurve(lis[i].lastChild);
allChecked = allChecked && lis[i].firstChild.firstChild.checked && lis[i].firstChild.firstChild.allChecked;
allUnChecked = allUnChecked && !lis[i].firstChild.firstChild.checked && lis[i].firstChild.firstChild.allUnChecked;
}
ul.parentNode.firstChild.firstChild.allChecked=allChecked;
ul.parentNode.firstChild.firstChild.allUnChecked=allUnChecked;
if (allChecked || allUnChecked){
ul.parentNode.firstChild.firstChild.checked=allChecked;
ul.parentNode.firstChild.firstChild.disabled=false;
ul.parentNode.firstChild.childStatus=false;
}else{
ul.parentNode.firstChild.firstChild.disabled=true;
ul.parentNode.firstChild.childStatus=true;
ul.parentNode.firstChild.firstChild.checked=true; }
}function enableFirstChild(){
this.childStatus = this.firstChild.disabled;
this.firstChild.disabled=false;
}
function recoverFirstChild(){
this.firstChild.disabled = this.childStatus;
}
function init(){
var elms = document.getElementsByTagName("INPUT");
for (var i=0;i<elms.length;i++)
elms[i].onclick=checkSelect;
var elms = document.getElementsByTagName("SPAN");
for (var i=0;i<elms.length;i++){
elms[i].onmouseover=enableFirstChild;
elms[i].onmouseout=recoverFirstChild;
}
}//-->
</SCRIPT>
</HEAD><BODY onload="init()">
<div>
<span><input type=checkbox></span>
<UL id=root>
<LI><span><input type=checkbox></span>
<UL>
<LI><span><input type=checkbox></span>
<UL>
<LI><span><input type=checkbox></span>
<LI><span><input type=checkbox></span>
</UL>
<LI><span><input type=checkbox></span>
<UL>
<LI><span><input type=checkbox></span>
<LI><span><input type=checkbox></span>
</UL>
</UL>
<LI><span><input type=checkbox></span>
<UL>
<LI><span><input type=checkbox></span>
<UL>
<LI><span><input type=checkbox></span>
<LI><span><input type=checkbox></span>
</UL>
<LI><span><input type=checkbox></span>
<UL>
<LI><span><input type=checkbox></span>
<LI><span><input type=checkbox></span>
</UL>
</UL>
</UL>
</div>
</BODY>
</HTML>

解决方案 »

  1.   

    有点问题，改了一下，应该ok了
    <HTML>
    <HEAD>
    <TITLE> emu's test of simple tree</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function checkSelect(){
    var elm = event.srcElement.parentNode;
    checkChildrenRecurve(elm);
    checkRootRecurve(document.getElementById("root"));
    checkChildrenClear(elm);
    }
    function checkChildrenRecurve(elm){
    var li = elm.parentNode;
    var ul = li.lastChild; 
    if (ul.tagName != "UL") return;
    var lis = ul.children;
    for (var i=0;i<lis.length;i++){
    lis[i].firstChild.firstChild.checked=elm.firstChild.checked;
    lis[i].firstChild.firstChild.allChecked = elm.firstChild.checked;
    lis[i].firstChild.firstChild.allUnChecked = !elm.firstChild.checked;
    checkChildrenRecurve(lis[i].firstChild)
    }
    }
    function checkChildrenClear(elm){
    var li = elm.parentNode;
    var ul = li.lastChild; 
    if (ul.tagName != "UL") return;
    var lis = ul.children;
    for (var i=0;i<lis.length;i++){
    lis[i].firstChild.firstChild.checked=false;
    checkChildrenRecurve(lis[i].firstChild)
    }
    }
    function checkRootRecurve(ul){
    if (ul.tagName != "UL") {
    if(ul.parentNode.firstChild.firstChild.allChecked == null){
    ul.parentNode.firstChild.firstChild.allChecked = false;
    ul.parentNode.firstChild.firstChild.allUnChecked = true;
    }
    return;
    }
    var lis = ul.children;
    var allChecked = true;
    var allUnChecked = true;
    for (var i=0;i<lis.length;i++){
    checkRootRecurve(lis[i].lastChild);
    allChecked = allChecked && lis[i].firstChild.firstChild.allChecked;
    allUnChecked = allUnChecked && lis[i].firstChild.firstChild.allUnChecked;
    }
    ul.parentNode.firstChild.firstChild.allChecked=allChecked;
    ul.parentNode.firstChild.firstChild.allUnChecked=allUnChecked;
    if (allChecked || allUnChecked){
    ul.parentNode.firstChild.firstChild.checked=allChecked;
    ul.parentNode.firstChild.firstChild.disabled=false;
    ul.parentNode.firstChild.childStatus=false;
    }else{
    ul.parentNode.firstChild.firstChild.disabled=true;
    ul.parentNode.firstChild.childStatus=true;
    ul.parentNode.firstChild.firstChild.checked=true; }
    }function enableFirstChild(){
    this.childStatus = this.firstChild.disabled;
    this.firstChild.disabled=false;
    }
    function recoverFirstChild(){
    this.firstChild.disabled = this.childStatus;
    }
    function init(){
    var elms = document.getElementsByTagName("INPUT");
    for (var i=0;i<elms.length;i++)
    elms[i].onclick=checkSelect;
    var elms = document.getElementsByTagName("SPAN");
    for (var i=0;i<elms.length;i++){
    elms[i].onmouseover=enableFirstChild;
    elms[i].onmouseout=recoverFirstChild;
    }
    }//-->
    </SCRIPT>
    </HEAD><BODY onload="init()">
    <div>
    <span><input type=checkbox></span>
    <UL id=root>
    <LI><span><input type=checkbox></span>
    <UL>
    <LI><span><input type=checkbox></span>
    <UL>
    <LI><span><input type=checkbox></span>
    <LI><span><input type=checkbox></span>
    </UL>
    <LI><span><input type=checkbox></span>
    <UL>
    <LI><span><input type=checkbox></span>
    <LI><span><input type=checkbox></span>
    </UL>
    </UL>
    <LI><span><input type=checkbox></span>
    <UL>
    <LI><span><input type=checkbox></span>
    <UL>
    <LI><span><input type=checkbox></span>
    <LI><span><input type=checkbox></span>
    </UL>
    <LI><span><input type=checkbox></span>
    <UL>
    <LI><span><input type=checkbox></span>
    <LI><span><input type=checkbox></span>
    </UL>
    </UL>
    </UL>
    </div>
    </BODY>
    </HTML>
      

  2.   

    to zhfkiller(杀手):你发的第一个,效果上是我要的，但的确有少许bug第二个虽然修正了那个bug,但是出现了新的bug---选择最末端的叶子时，没有出现联动
      

  3.   

    哈哈﹐看到標題就猜到時我以前寫的那個了﹐進來一看果然是emu's test of simple tree呵。“子checkbox的子checkbox不能被选”邏輯上說不過去啊﹐要不我幹嗎費那麼大勁去遞歸檢測子節點呢﹖