checkbox隐藏和显示


<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>级联选择</title>
</head><body><ul id="tree">
    <!--<li><input type=checkbox> -->
        <ul>
            <li>開発部：<input type=checkbox>
               <ul >
                    <li><input type=checkbox></li>
                    <li><input type=checkbox></li>
                </ul>
            </li >
            <li>人事部：<input type=checkbox >
                <ul >
                    <li><input type=checkbox></li>
                    <li><input type=checkbox></li>
                </ul>
            </li>
            <li>営業部：<input type=checkbox>
                <ul>
                    <li><input type=checkbox></li>
                    <li><input type=checkbox></li>
                </ul>
            </li>
        </ul>
    <!--</li>-->
</ul>
</body><script language="javascript">var arr = tree.getElementsByTagName('input')
for(var i=0; i<arr.length; i++){
    var input = arr[i]
    if(input.type = 'checkbox'){
        input.onclick = ClickInput
    }
}function ClickInput(){
    var li = this.parentElement;
    var arr = li.getElementsByTagName('input')
    for(var i=0; i<arr.length; i++){
        var input = arr[i]
        if(input.type == 'checkbox'){
            input.checked = this.checked
        }
    }
 var li = li.parentElement.parentElement    while(li.tagName.toLowerCase() == 'li'){
        var input = li.childNodes[0]
        if(input.tagName.toLowerCase() == 'input'){
            input.checked = this.checked
        }
        li = li.parentElement.parentElement    }}
</script>
</html>
谁能帮我修改一下代码，点击父checbox时候，它级联的下一级checkbox会显示或隐藏，在父checkbox前有个加号那样的，加号时候是隐藏状态，点击变成减号，显示状态先谢谢了

解决方案 »

  1.   

    加点关联关系很容易处理的的，比如id关联<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>级联选择</title>
    <style>
    #tree > ul {
    list-style:none;
    }
    #tree li > ul {
    display:none;
    }
    </style>
    </head><body><ul id="tree">
        <!--<li><input type=checkbox> -->
            <ul>
                <li><span id="dev_pre"> + </span>開発部：<input type=checkbox onclick="expand(this.checked,'dev')">
                   <ul id='dev'>
                        <li><input type=checkbox></li>
                        <li><input type=checkbox></li>
                    </ul>
                </li >
                <li><span id="per_pre"> + </span>人事部：<input type=checkbox onclick="expand(this.checked,'per')">
                    <ul id='per'>
                        <li><input type=checkbox></li>
                        <li><input type=checkbox></li>
                    </ul>
                </li>
                <li><span id="sel_pre"> + </span>営業部：<input type=checkbox onclick="expand(this.checked,'sel')">
                    <ul id='sel'>
                        <li><input type=checkbox></li>
                        <li><input type=checkbox></li>
                    </ul>
                </li>
            </ul>
        <!--</li>-->
    </ul>
    </body><script language="javascript">var expand = function(t,n){
    document.getElementById(n).style.display = ["none","block"][t+0]
    document.getElementById(n+'_pre').innerHTML = [" + "," - "][t+0]
    }
    </script>
    </html>
      

  2.   

    选中上一级checkbox，下面的跟着全选中的不能用了，光能隐藏了
      

  3.   

    那就把子的全部设置为display:none，只有父的选择事件触发的时候通过方法将display:none设置为false就显示出来了，思路是这样的
      

  4.   

    Jquery$("checkbox").onClick(function(){
        $(this)..
    })Sorry ,Jquery 不熟悉，但是应该就是这么搞的
      

  5.   

    改一下咯。css你自己定义吧，原来那个不兼容ie.<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>级联选择</title>
    <style>
    #tree ul {
    list-style:none;
    }
    li ul {
    display:none;
    }
    </style>
    </head><body><ul id="tree">
        <!--<li><input type=checkbox> -->
            <ul>
                <li><span id="dev_pre"> + </span>開発部：<input type=checkbox onclick="expand(this.checked,'dev')">
                   <ul id='dev'>
                        <li><input type=checkbox></li>
                        <li><input type=checkbox></li>
                    </ul>
                </li >
                <li><span id="per_pre"> + </span>人事部：<input type=checkbox onclick="expand(this.checked,'per')">
                    <ul id='per'>
                        <li><input type=checkbox></li>
                        <li><input type=checkbox></li>
                    </ul>
                </li>
                <li><span id="sel_pre"> + </span>営業部：<input type=checkbox onclick="expand(this.checked,'sel')">
                    <ul id='sel'>
                        <li><input type=checkbox></li>
                        <li><input type=checkbox></li>
                    </ul>
                </li>
            </ul>
        <!--</li>-->
    </ul>
    </body><script language="javascript">var expand = function(t,n){
    var o = document.getElementById(n);
    var chks = o.getElementsByTagName("input");
    o.style.display = ["none","block"][t+0];
    document.getElementById(n+'_pre').innerHTML = [" + "," - "][t+0]
    for(var i=0,j=chks.length;i<j;i++){
    chks[i].checked = t;
    }

    }
    </script>
    </html>
      

  6.   

    另外每一个checkbox我应该都可以加上value和name吧？这样我可以判断它是否被选中，是不是这样啊？
    開発部，人事部，営業部 算是一组，然后每个下面的再算成一组，判断是否选中，这样想能行吗？