【原】TreeView+Checkbox级联操作（IE/FireFox测试通过）

TreeView+Checkbox级联操作

步骤1、前台页面拖放一个Treeview，将其ShowCheckBoxes属性设置为All

<asp:TreeView ID="tvCountry" runat="server" ShowCheckBoxes="All">

步骤2、在后台代码中添加Treeview的特性，使得Treeview控件在单击时触发JavaScript实现的级联逻辑

代码

1 <script type="text/javascript" language="javascript">
2 // TreeView节点触发事件
3 function Client_OnTreeNodeChecked(evt){
4 var obj = getCurrentNode(evt); // 根据浏览器判断事件
5 var treeNodeFound = false;
6 var checkedState;
7
8 if(obj.tagName == "INPUT" && obj.type == "checkbox"){
9 checkedState = obj.checked;
10 var curNode = getParentNode(obj);
11 changeNodeState(curNode,checkedState);
12 }
13 }
14
15 // 根据浏览器判断事件
16 function getCurrentNode(evt){
17 var obj;
18
19 if(window.event){// IE
20 obj = window.event.srcElement;
21 }else{// FireFox
22 obj = (evt?evt:(window.event?window.event:null)).target;
23 }
24
25 return obj;
26 }
27
28 // 取得父节点
29 function getParentNode(node){
30 do{
31 node = node.parentNode;
32 }while(node.tagName!="TABLE")
33 return node;
34 }
35
36 // 改变节点状态
37 function changeNodeState(node,state){
38 // 根据nextSibling属性判断处于同一树层级中紧跟的元素
39 if(node.nextSibling != null && node.nextSibling.tagName == "DIV"){
40 var cbArr = node.nextSibling.getElementsByTagName("INPUT");
41 for (var i = 0; i < cbArr.length; i++){
42 if (cbArr[i].type == "checkbox"){
43 cbArr[i].checked = state;
44 }
45 }
46 }
47
48 var flag = true;
49 var inputArr = node.parentNode.getElementsByTagName("INPUT");
50
51 if(state){
52 for(var i=0;i<inputArr.length;i++){
53 if (inputArr[i].type == "checkbox" && !inputArr[i].checked){
54 flag = false;
55 }
56 }
57 }else{
58 flag = true;
59 }
60
61 if(flag){
62 var parentArr = node.parentNode.previousSibling.getElementsByTagName("INPUT");
63 for(var i=0;i<parentArr.length;i++){
64 if(parentArr[i].type == "checkbox"){
65 parentArr[i].checked = state;
66 }
67 }
68 }
69 }
70 </script>

【运行效果】：