JavaScript学习（一）实现TreeView选中根结点，其子结点都被选中

1，建1个treeview

1                    <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" ShowCheckBoxes="All"
2                              onclick="treeViewCheck(event) ;" ShowExpandCollapse="true">
3                     </asp:TreeView>

2，在onclick事件里调用 treeViewCheck(event);

  1<script language="javascript" type="text/javascript">
  2
  3
  4function goDeeperChecked(obj) 
  5
  6{ 
  7        var chk1 = true; 
  8        //Get the parent. 
  9        var head1 = obj.parentNode.previousSibling; 
 10        //no rows, cant do my work.     
 11        if(obj.rows == null) 
 12        {    
 13            return ;    
 14      } 
 15        //This is how may rows are at this level. 
 16        var pTreeLevel1 = obj.rows[0].cells.length; 
 17        //Are we a parentmy? 
 18        if(head1.tagName == "TABLE") 
 19      { 
 20                //Get the list of rows ahead of us. 
 21                var tbls = obj.parentNode.getElementsByTagName("TABLE");     
 22                //get the count of that list. 
 23                var tblsCount = tbls.length; 
 24                //determine if any of the rows underneath are unchecked. 
 25
 26                for(i=0; i < tblsCount; i++) 
 27                { 
 28                    var childTreeLevel = tbls[i].rows[0].cells.length; 
 29                    if(childTreeLevel = pTreeLevel1) 
 30                    { 
 31                        var chld = tbls[i].getElementsByTagName("INPUT"); 
 32                        if(chld[0].checked == false) 
 33                        { chk1 = false; 
 34                            break; 
 35                        } 
 36                    } 
 37                } 
 38                var nd = head1.getElementsByTagName("INPUT"); 
 39                nd[0].checked = chk1; 
 40                //do the same for the level above 
 41                goDeeperChecked(obj.parentNode); 
 42        } 
 43        else
 44        { 
 45            return; 
 46        } 
 47} 
 48
 49
 50function goDeeper(check, obj) 
 51{ 
 52
 53        //head1 gets the parent node of the unchecked node 
 54
 55        var head = obj.parentNode.previousSibling; 
 56        if(head.tagName == "TABLE") 
 57        { 
 58            //checks for the input tag which consists of checkbox 
 59            var matchElement = head.getElementsByTagName("INPUT"); 
 60            //matchElement1[0] gives us the checkbox and it is unchecked 
 61            matchElement[0].checked = false; 
 62        } 
 63        else
 64        { 
 65            head = obj.parentNode.previousSibling; 
 66        } 
 67        
 68        if(head.tagName == "TABLE") 
 69        { 
 70            goDeeper(check, obj.parentNode); 
 71        } 
 72      else
 73        { 
 74            return; 
 75        } 
 76} 
 77
 78function treeViewCheck(event) 
 79{ 
 80        // obj gives us the node on which check or uncheck operation has performed 
 81        var obj = event.srcElement || event.target ; 
 82        var    treeNodeFound = false; 
 83        var checkedState; 
 84     
 85         //checking whether obj consists of checkbox to avoid exception 
 86        if(obj.tagName == "INPUT" && obj.type == "checkbox") 
 87        { 
 88            var treeNode = obj; 
 89            checkedState = treeNode.checked; 
 90    
 91            //work our way back to the parent <table> element 
 92            do
 93            { 
 94                obj = obj.parentNode; 
 95            } while(obj.tagName != "TABLE") 
 96
 97            var parentTreeLevel = obj.rows[0].cells.length; 
 98            var parentTreeNode = obj.rows[0].cells[0]; 
 99            //get all the TreeNodes inside the TreeView (the parent <div>) 
100            var tables = obj.parentNode.getElementsByTagName("TABLE"); 
101            //checking for any node is checked or unchecked during operation 
102            if(obj.tagName == "TABLE") 
103            { 
104//                    // if any node is unchecked then their parent node are unchecked 
105//                    if(!treeNode.checked) 
106//                    { 
107//                        goDeeper(false, obj); 
108//                    } 
109
110                    //end if - unchecked 
111                    //total number of TreeNodes 
112                    var numTables = tables.length 
113                    if(numTables >= 1) 
114                    { 
115                        //cycle through all the TreeNodes 
116                        //until we find the TreeNode we checked 
117                        for(i=0; i < numTables; i++) 
118                        { 
119                            if(tables[i] == obj) 
120                            { 
121                                treeNodeFound = true; 
122                                i++; 
123                                if(i == numTables) 
124                                { 
125                                    //if we're on the last TreeNode, we are done 
126                                    break; 
127                                } 
128                            } 
129                            if(treeNodeFound == true) 
130                            { 
131                                var childTreeLevel = tables[i].rows[0].cells.length; 
132                                if(childTreeLevel > parentTreeLevel) 
133                                { 
134                                    var cell = tables[i].rows[0].cells[childTreeLevel - 1]; 
135                                    //set the checkbox to match the checkedState 
136                                    var inputs = cell.getElementsByTagName("INPUT"); 
137                                    inputs[0].checked = checkedState; 
138                                } 
139                                else
140                                { 
141                                    //if any of the preceding TreeNodes are not deeper stop 
142                                    break; 
143                                } 
144                            } 
145                      //end if 
146                         }
147                    //end for 
148                    } 
149                    //end if - numTables >= 1 
150                    // if all child nodes are checked then their parent node is checked 
151
152//                    if(treeNode.checked) 
153//                    { 
154//                        goDeeperChecked(obj); 
155//                    }
156
157            //end if - checked 
158            } 
159
160        //end if - tagName = TABLE 
161        } 
162//end if 
163} 
164
165//end function 
166
167</script>