以前项目中写过,现在找不出来...
checkbox半选状态可以用属性indeterminate实现

解决方案 »

  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; }
    }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>
      

  2.   

    还是indeterminate比较漂亮。<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.indeterminate=false;
    }else{
    ul.parentNode.firstChild.indeterminate=true;
    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>