隨筆-348 
評論-598 
文章-0 
trackbacks-0

          
	

          

          
	
					


          
	
	
          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

	
          posted on 2009-11-12 08:46 TiGERTiAN 閱讀(3432) 評論(4)  編輯  收藏  所屬分類: VB/ASP 、JSF 
          

          







          
	    
    


          
評論:

          
	

		
          
			
          
			# re: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作
				2009-11-12 14:30 | 凡客誠品優惠券
          
				
          不錯，收藏  回復  更多評論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作
				2009-11-12 18:49 | BeanSoft
          
				
          收藏了!  回復  更多評論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作
				2009-11-12 19:25 | jackyrong
          
				
          能否提供完整代碼下載呢  回復  更多評論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作
				2009-11-12 19:45 | TiGERTiAN
          
				
          @jackyrong

          這個就是完整的代碼啊  回復  更多評論
            
          
			
          
			
			
		
          
	








          








          

				

          







    







          
        
	




主站蜘蛛池模板：
疏勒县|
南部县|
石首市|
调兵山市|
漳浦县|
泉州市|
额济纳旗|
凤城市|
永顺县|
通道|
富阳市|
清镇市|
景宁|
昌江|
宝应县|
庆安县|
金华市|
饶河县|
阜宁县|
黄大仙区|
论坛|
姚安县|
丰顺县|
十堰市|
丰城市|
濮阳市|
苏尼特右旗|
丰宁|
临夏市|
崇礼县|
聂拉木县|
马山县|
迁安市|
洛南县|
芜湖市|
伊川县|
云梦县|
福贡县|
永川市|
潮安县|
岐山县|