1<html>
2<head>
3<meta content="zh-cn" http-equiv="Content-Language"/>
4<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
5<meta content="Microsoft FrontPage 4.0" name="GENERATOR"/>
6<meta content="FrontPage.Editor.Document" name="ProgId"/>
7<title>CheckBox</title>
8<script defer="" language="javascript">
9var n=document.getElementsByTagName("INPUT");
10var CheckBoxNum=n.length;
11var tf,SearchNodeName,SearchParentNodeName,SameNodeNum,SubNodeCheckedNum,SameNodeCheckedNum,SubNodeNum,SubNodeCheckedTF;
12
13function FindParentNode(SubNodeName) //获取上级结点名，并判断是否被选中
14{
15tf=false; //初始化选中状态
16SearchNodeName=SubNodeName;
17t=SubNodeName.lastIndexOf("_"); //判断是否存在上级结点
18if(t!=-1)SearchNodeName=SubNodeName.substring(0,t);//如果存在上级结点，取得上级结点名
19if(document.all(SubNodeName).checked)tf=true;//判断结点是否被选中
20return SearchNodeName;
21}
22
23
24function CheckSubNode(NodeName) //获取结点名，并判断子结点是否选中
25{
26SubNodeCheckedTF=false; //初始化子结点选中状态
27SubNodeNum=0; //初始化子结点数目
28SameNodeNum=0; //初始化同级结点数目
29SubNodeCheckedNum=0; //初始化子结点被选中的数目
30SameNodeCheckedNum=0; //初始化同级结点被选中的数目
31ParentNodeName=FindParentNode(NodeName);//上级结点名
32SearchParentNodeName=NodeName;//当前结点名
33d=NodeName.lastIndexOf("_"); //判断是否存在上级结点
34if(d!=-1)SearchParentNodeName=SearchParentNodeName.substring(0,d);//如果存在上级结点，取得上级结点名
35for(i=0;i<CheckBoxNum;i++)
36{
37if(n[i].name.length==NodeName.length&&ParentNodeName==FindParentNode(n[i].name))
38{
39SameNodeNum+=1; //同级结点数目加一
40if(n[i].checked)SameNodeCheckedNum+=1;//同级结点被选中的数目加一
41}
42
43if(n[i].name.substring(0,NodeName.length)==NodeName&&n[i].name!=NodeName&&n[i].type=="checkbox")
44{
45SubNodeNum+=1; //子结点数数目加一
46if(n[i].checked)SubNodeCheckedNum+=1;//子结点被选中的数目加一
47}
48}
49
50
51if((SameNodeNum==1 ¦ ¦SameNodeCheckedNum==0)&&(SubNodeCheckedNum==0)&&!document.all(NodeName).checked)
52{
53SubNodeCheckedTF=true; //判断子结点是否被选中
54}
55return SearchParentNodeName;
56}
57
58
59function CheckAll(BoxName)
60{
61SearchNodeName=BoxName;
62SearchParentNodeName=BoxName
63SubNodeLength=BoxName.split("_").length;
64
65for(i=0;i<CheckBoxNum;i++)
66{
67if(n[i].name.substring(0,BoxName.length)==BoxName&&n[i].name!=BoxName&&n[i].type=="checkbox")
68n[i].checked=document.all(BoxName).checked?true:false; //选中所有子结点
69}
70
71for(j=1;j<SubNodeLength;j++)
72{
73document.all(FindParentNode(SearchNodeName)).checked=tf?true:false;
74document.all(CheckSubNode(SearchParentNodeName)).checked=SubNodeCheckedTF?false:true;
75}
76
77}
78
79
80document.onclick=function(){if(event.srcElement.type=="checkbox")CheckAll(event.srcElement.name);}
81</script>
82</head>
83<body>
84<form name="f1">
85<input name="bid" type="checkbox"/><br/>
86<input name="bid_01" type="checkbox"/><br/>
87<input name="bid_01_01" type="checkbox"/><br/>
88<input name="bid_01_02" type="checkbox"/><br/>
89<input name="bid_01_02_01" type="checkbox"/><br/>
90<input name="bid_01_02_02" type="checkbox"/><br/>
91<input name="bid_01_02_02_01" type="checkbox"/><br/>
92<input name="bid_01_02_02_02" type="checkbox"/><br/>
93<input name="bid_01_02_02_03" type="checkbox"/><br/>
94<input name="bid_01_02_02_03_01" type="checkbox"/><br/>
95<input name="bid_01_02_02_03_02" type="checkbox"/><br/>
96<input name="bid_01_02_02_03_03" type="checkbox"/><br/>
97<input name="bid_01_02_02_04" type="checkbox"/><br/>
98<input name="bid_01_02_03" type="checkbox"/><br/>
99<input name="bid_01_03" type="checkbox"/><br/>
100<input name="bid_01_04" type="checkbox"/><br/>
101<input name="bid_02" type="checkbox"/><br/>
102<input name="bid_03" type="checkbox"/><br/>
103<input name="bid_04" type="checkbox"/><br/>
104<hr/>
105<input checkmain="" name="ent" type="checkbox"/><br/>
106<input name="ent_01" type="checkbox"/><br/>
107<input name="ent_01_01" type="checkbox"/><br/>
108<input name="ent_02" type="checkbox"/><br/>
109<input name="ent_03" type="checkbox"/><br/>
110<input name="ent_04" type="checkbox"/><br/>
111</form></body></html>
【推荐】CheckBox分级选中[转贴]
comments powered by Disqus