用jQuery给页面中树形的Checkbox默认加上父子节点相关操作(JSF的Richfaces专用)

用jQuery给页面中树形的Checkbox默认加上父子节点相关操作(JSF的Richfaces专用)

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 ;
            }

        }

注意引入jQuery包。
此js代码加到页面中，将会给页面中的树形菜单的Checkbox默认加上一些功能：当选择父节点时全选子节点；当子节点全选时，父节点也会被自动选择上。同时不会影响其他Checkbox。

---------------------------------------------------------
专注移动开发
Android, Windows Mobile, iPhone, J2ME, BlackBerry, Symbian