checkbox隐藏和显示

xuexiziji 2009-09-15 02:24:39



<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前有个加号那样的，加号时候是隐藏状态，点击变成减号，显示状态

先谢谢了

...全文

749 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

xuexiziji 2009-09-15

打赏
举报

谢谢你了，这么多勋章肯定是高手，呵呵

foolbirdflyfirst 2009-09-15

打赏
举报

[Quote=引用 9 楼 xuexiziji 的回复:]
另外每一个checkbox我应该都可以加上value和name吧？这样我可以判断它是否被选中，是不是这样啊？
開発部，人事部，営業部算是一组，然后每个下面的再算成一组，判断是否选中，这样想能行吗？
[/Quote]
可以，id互相有所联系，操作起来就方便很多。

xuexiziji 2009-09-15

打赏
举报

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

xuexiziji 2009-09-15

打赏
举报

就是这样的，谢谢了

xuexiziji 2009-09-15

打赏
举报

谢谢，非常感谢，我试试看

foolbirdflyfirst 2009-09-15

打赏
举报

改一下咯。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>

jeff1987 2009-09-15

打赏
举报

Jquery

$("checkbox").onClick(function(){
$(this)..
})

Sorry ,Jquery 不熟悉，但是应该就是这么搞的

babysc1 2009-09-15

打赏
举报

用关联或者加入判断

yw1386 2009-09-15

打赏
举报

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

xuexiziji 2009-09-15

打赏
举报

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

foolbirdflyfirst 2009-09-15

打赏
举报

加点关联关系很容易处理的的，比如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>