还是树的问题，怎么就没人回复呢？别只说作过，共享一下，帮帮忙了！

我只能说我的想法，
在每一次改事件中，检查所有元素，然后写checkbox的状态。

解决方案 »

  1.   

    哇塞，一点都不容易写！
    传统的树代码我就不在这里罗嗦了，主要演示一下递归判断父节点和子节点的状态：
    <HTML>
    <HEAD>
    <TITLE> emu's test of simple tree</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function checkSelect(){
    var elm = event.srcElement;
    checkChildrenRecurve(elm);
    checkRootRecurve(document.getElementById("root"));
    }
    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.checked=elm.checked;
    checkChildrenRecurve(lis[i].firstChild)
    }
    }
    function checkRootRecurve(ul){
    if (ul.tagName != "UL") {
    ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
    ul.parentNode.firstChild.allUnChecked = !ul.parentNode.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.checked && lis[i].firstChild.allChecked;
    allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
    }
    ul.parentNode.firstChild.allChecked=allChecked;
    ul.parentNode.firstChild.allUnChecked=allUnChecked;
    if (allChecked || allUnChecked){
    ul.parentNode.firstChild.checked=allChecked;
    ul.parentNode.firstChild.style.backgroundColor="white";
    }else{
    ul.parentNode.firstChild.style.backgroundColor="gray";
    ul.parentNode.firstChild.checked=true; }
    }//-->
    </SCRIPT>
    </HEAD><BODY>
    <div>
    <input type=checkbox onclick="checkSelect()">
    <UL id=root>
    <LI><input type=checkbox onclick="checkSelect()">
    <UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <LI><input type=checkbox onclick="checkSelect()">
    </UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <LI><input type=checkbox onclick="checkSelect()">
    </UL>
    </UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <LI><input type=checkbox onclick="checkSelect()">
    </UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <UL>
    <LI><input type=checkbox onclick="checkSelect()">
    <LI><input type=checkbox onclick="checkSelect()">
    </UL>
    </UL>
    </UL>
    </div>
    </BODY>
    </HTML>
      

  2.   

    稍做了点改动，把onclick从html中间挪出来了：<HTML>
    <HEAD>
    <TITLE> emu's test of simple tree</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function checkSelect(){
    var elm = event.srcElement;
    checkChildrenRecurve(elm);
    checkRootRecurve(document.getElementById("root"));
    }
    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.checked=elm.checked;
    checkChildrenRecurve(lis[i].firstChild)
    }
    }
    function checkRootRecurve(ul){
    if (ul.tagName != "UL") {
    ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
    ul.parentNode.firstChild.allUnChecked = !ul.parentNode.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.checked && lis[i].firstChild.allChecked;
    allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
    }
    ul.parentNode.firstChild.allChecked=allChecked;
    ul.parentNode.firstChild.allUnChecked=allUnChecked;
    if (allChecked || allUnChecked){
    ul.parentNode.firstChild.checked=allChecked;
    ul.parentNode.firstChild.style.backgroundColor="white";
    }else{
    ul.parentNode.firstChild.style.backgroundColor="gray";
    ul.parentNode.firstChild.checked=true; }
    }function init(){
    var elms = document.getElementsByTagName("INPUT");
    for (var i=0;i<elms.length;i++)
    elms[i].onclick=checkSelect;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onload="init()">
    <div>
    <input type=checkbox>
    <UL id=root>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    <LI><input type=checkbox>
    <UL>
    <LI><input type=checkbox>
    <LI><input type=checkbox>
    </UL>
    </UL>
    </UL>
    </div>
    </BODY>
    </HTML>
    呼、呼，我要去歇会了……