js实现复选框下级控制上级选中与否

提供一种方案：首先你要构建这个菜单的树结构，
每个菜单的节点对象至少有以一的属性和方法。
   a) value 0 (未选取),1(选取)
   b) parentNode  ------- 父菜单节点对象
   c) childNodes  ------- 子菜单对象数组.
   d) checkAllChilds() {
       检查所以孩子,如果全部的子节点为false,则 this.value = false;
       并调用父节点的checkAllChilds()方法.
   e) onChange事件,
    如果是前者的话比较容易,只要判断当前节点的childNodes是不是为空就可以了.
    为空的时候,通过调用父节点的checkAllChilds(),将消息向上传递.直到父节点为空或者
     或父节点为选中为止.   f) setChildValue 和 checkAllChilds同理,不过是向下进行消息传递.

这里不是树形结构，而且，是jsp中的checkbox操作。用节点应该不行的。
不过，还是很感谢你！呵呵
希望大家帮帮忙哟！呵呵

HOHO,抽空简单做了一下，
和你的要求有出入的地方你自己改一下吧。
主要是用来说明我前面提到的方法怎样实现。common.js
/**
* @author syukugai
*/
function $(id){
    return document.getElementById(id);
}window.onerror = function(msg, url, l){
    var errMsg;

    errMsg = "There was an error on this page.\n\n";
    errMsg += "Error: " + msg + "\n";
    errMsg += "URL: " + url + "\n";
    errMsg += "Line: " + l + "\n\n";
    errMsg += "Click OK to continue.\n\n";

    alert(txt)
    return true
}function ClassNode(){
    var me = this;
    this._parent = null;
    this._children = new Array();
    this._nextSibling = null;
    this._prevSibling = null;

    this.onclick = function(){
        this.setChildsValue(me.checked);
this._parent.checkChildsValue();
    }

    this.tell = function(){
        alert(me.value);
        alert(me._parent.value);
    }

    this.setParent = function(node){
        this._parent = node;
    }

    this.appendChild = function(obj){
        this._children.push(obj);
        obj.setParent(me);
    }

    this.checkChildsValue = function(){
if (this._children.length == 0) {
return;
} for(var i=0;i<this._children.length;i++){
if(this._children[i].checked==false){
this.checked=false;
this._parent.checkChildsValue();
return;
}
}

this.checked = true;
this._parent.checkChildsValue();
    }

    this.setChildsValue = function(val){
        for (var i = 0; i < this._children.length; i++) {
            this._children[i].checked = val;
            this._children[i].setChildsValue(val);
        }
    }
}

HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script language="JavaScript" type="text/javascript" src="common.js">
        </script>
        <script language="JavaScript">
            window.onload = function(){
                var obj1_1 = $("chk1_1");
                var obj1_2 = $("chk1_2");

                var obj1_1_1 = $("chk1_1_1");
                var obj1_1_2 = $("chk1_1_2");

                var obj1_1_2_1 = $("chk1_1_2_1");
                var obj1_1_2_2 = $("chk1_1_2_2");
                var obj1_1_2_3 = $("chk1_1_2_3");

                var obj1_1_2_3_1 = $("chk1_1_2_3_1");
                var obj1_1_2_3_2 = $("chk1_1_2_3_2");
                var obj1_1_2_3_3 = $("chk1_1_2_3_3");
                var obj1_1_2_3_4 = $("chk1_1_2_3_4");


                ClassNode.call(obj1_1);
                ClassNode.call(obj1_2);

                ClassNode.call(obj1_1_1);
                ClassNode.call(obj1_1_2);

                ClassNode.call(obj1_1_2_1);
                ClassNode.call(obj1_1_2_2);
                ClassNode.call(obj1_1_2_3);

                ClassNode.call(obj1_1_2_3_1);
                ClassNode.call(obj1_1_2_3_2);
                ClassNode.call(obj1_1_2_3_3);
                ClassNode.call(obj1_1_2_3_4);

                obj1_1.appendChild(obj1_1_1);
                obj1_1.appendChild(obj1_1_2);

                obj1_1_2.appendChild(obj1_1_2_1);
                obj1_1_2.appendChild(obj1_1_2_2);
                obj1_1_2.appendChild(obj1_1_2_3);

                obj1_1_2_3.appendChild(obj1_1_2_3_1);
                obj1_1_2_3.appendChild(obj1_1_2_3_2);
                obj1_1_2_3.appendChild(obj1_1_2_3_3);
                obj1_1_2_3.appendChild(obj1_1_2_3_4);

                //                alert(obj1_1_2_3._parent.value);
            }
        </script>
    </head>
    <body>
        <input type="checkbox" id="chk1_1" value="1_1">checkBox 1_1
        <br>
        <input type="checkbox" id="chk1_2" value="1_2">checkBox 1_2
        <br>
        <br>
        <input type="checkbox" id="chk1_1_1" value="1_1_1">checkBox 1_1_1
        <br>
        <input type="checkbox" id="chk1_1_2" value="1_1_2">checkBox 1_1_2
        <br>
        <br>
        <input type="checkbox" id="chk1_1_2_1" value="1_1_2_1">checkBox 1_1_2_1
        <br>
        <input type="checkbox" id="chk1_1_2_2" value="1_1_2_2">checkBox 1_1_2_2
        <br>
        <input type="checkbox" id="chk1_1_2_3" value="1_1_2_3">checkBox 1_1_2_3
        <br>
        <br>
        <input type="checkbox" id="chk1_1_2_3_1" value="1_1_2_3_1">checkBox 1_1_2_3_1
        <br>
        <input type="checkbox" id="chk1_1_2_3_2" value="1_1_2_3_2">checkBox 1_1_2_3_2
        <br>
        <input type="checkbox" id="chk1_1_2_3_3" value="1_1_2_3_3">checkBox 1_1_2_3_3
        <br>
        <input type="checkbox" id="chk1_1_2_3_4" value="1_1_2_3_4">checkBox 1_1_2_3_4
        <br>
        <br>
    </body>
</html>

又看了一下你的题，
好像是做反了，
你这样改一下吧。 this.checkChildsValue = function(){
if (this._children.length == 0) {
return;
} for(var i=0;i<this._children.length;i++){
if(this._children[i].checked==true){
this.checked=true;
this._parent.checkChildsValue();
return;
}
}

this.checked = false;
this._parent.checkChildsValue();
}

调试易

js实现复选框下级控制上级选中与否

解决方案 »