jQuery.noConflict();//與JSF搭配需要這句話,不然會有沖突 jQuery(document).ready(function() { // Add click event listener to each checkbox in the tree page // Note! Using this simple selector assumes that there are no other // checkboxes on the page, if there are other checkboxes then // selector should be changed jQuery(":checkbox").click(function(){ updateChildren(this); updateParent(this); }); }); </script> <script type="text/javascript"> function updateChildren(currentCheckBox) { // Get state of current checkbox (true or false) var state = currentCheckBox.checked; // Get parent TABLE, where current checkbox is places var parentTables = jQuery(currentCheckBox).parents("table"); var parentTable = parentTables[0]; // Get DIV where child nodes with checkboxes are situated // See http://docs.jquery.com/Traversing/ to get better uderstanding of // parents() and next() var childDivs = jQuery(parentTable).next("div"); if( childDivs.length >0 ) { var childDiv = childDivs[0]; // Iterate over all child nodes checkboxes and set same state as the // current checkbox state jQuery(childDiv).contents().find(":checkbox").each(function() { this.checked = state; }); } } //更新父節點的方法,如果子節點全部選中則父節點選中,如果子節點中有一個未選中,則父節點也未選中 function updateParent(currentCheckbox) { var parentDivs = jQuery(currentCheckbox).parents("div"); var parentDiv = parentDivs[0]; var hasSelected =false; jQuery(parentDiv).contents().find(":checkbox").each(function() { if(this.checked) { hasSelected =true; }else{ hasSelected = false;
return;
} }); var parentTables = jQuery(parentDiv).prev("table"); if(parentTables.length >0) { var parentTable = parentTables[0]; var parentCheckboxes = jQuery(parentTable).find(":checkbox"); var parentCheckbox = parentCheckboxes[0]; parentCheckbox.checked = hasSelected ; } }