随笔-348  评论-598  文章-0  trackbacks-0
jQuery操作JSF中的Checkbox树

下面的代码是，当选中父节点，则子节点全选；选中任意一个子节点，则选中父节点

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;
                }
            });
            
            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.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 = true;
            
            jQuery(parentDiv).contents().find(":checkbox").each(function() {
                if(!this.checked) {
                    hasSelected = false;
                }
            });
            
            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 ;
            }

        }


---------------------------------------------------------
专注移动开发
Android, Windows Mobile, iPhone, J2ME, BlackBerry, Symbian
posted on 2009-12-27 22:52 TiGERTiAN 阅读(2752) 评论(0)  编辑  收藏 所属分类: Java 、JSF

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 TiGERTiAN