如果在JQuery中未選中所有子項，則取消選中父節點

如果未選中所有子項，我想取消選中父節點。如果在JQuery中未選中所有子項，則取消選中父節點

<ul id="treeList"> 
    <li> 
    <input type="checkbox" name="selectedRole"> 
    Application Manager 
    <ul> 
     <li> 
      <input type="checkbox" name="selectedRole"> 
      Application Manager Panel 
     </li> 
     <li> 
      <input type="checkbox" name="selectedRole"> 
      Client Role 
      <ul> 
       <li> 
        <input type="checkbox" name="selectedRole"> 
        Client Task 1 
       </li> 
       <li> 
        <input type="checkbox" name="selectedRole"> 
        Client Task 2 
       </li> 
       </ul> 
       </li> 
      </ul> 
     </li>

我有以下jQuery腳本。但是當我沒有選中任何孩子時，父母沒有選中。它應該看到，如果所有的孩子都沒有檢查。那麼它應該取消選中父項。

jQuery.each(jQuery('#treeList ul li').find(':checkbox'), function(){ 
    jQuery(this).change(function(){ 
     if (jQuery(this).is(':checked')) { 
      jQuery(this).parents('ul').siblings('input:checkbox').attr('checked', true); 
     }else{ 
      jQuery(this).parents('ul').siblings('input:checkbox').attr('checked', false); 
     }   
    });  
});

來源

2011-07-02 Tahir Akram

您取消選中父每次取消一個孩子的時間li複選框，而不是檢查，如果有一些其他的檢查項目。相反，你可以檢查的項目checked的數量和使用length作爲boolean：

jQuery.each(jQuery('#treeList ul li').find(':checkbox'), function(){ 
    jQuery(this).change(function(){ 
     if (jQuery(this).is(':checked')) { 
         jQuery(this).parentsUntil('#treeList').siblings().filter('input:checkbox').attr('checked', true).trigger('change'); 
     }else{     
      jQuery(this).parents('ul:first').siblings('input:checkbox').prop('checked', $(this).parent().siblings().children('input:checked').length).trigger('change'); 
     }   
    });  
});

例如：http://jsfiddle.net/niklasvh/fRxVs/

這是你的提琴的更新版本...增加了一些CSS澄清樹層級（父子關係）http://jsfiddle.net/vimalpatel/fRxVs/440/

來源

2011-07-02 10:43:41 Niklas

對不起，它不起作用。如果我有另一個節點，如客戶端角色，並且它還可以有2個客戶端任務。有任何提示嗎？因爲它不適用於客戶端角色的兄弟節點。 –

@Tahir Akram對代碼做了一個小小的更新，應該按照預期工作。 – Niklas

A）。檢查客戶端任務2（最後一個節點） B）。取消選中客戶端任務2。它將取消選中客戶端角色。但是應用程序管理器（頂層節點）將保持檢查狀態。 [問題] –

這裏有：

$("#treeList :checkbox").change(function(){ 
     uncheckParentIfSiblingsUnchecked($(this)); 
     }); 
     function uncheckParentIfSiblingsUnchecked($chk){ 
     if($chk.size() == 1 && !$chk.is(":checked")){ 
      $checked_siblings = $chk.closest("ul").children("li").children(":checkbox:checked"); 
      if($checked_siblings.size() == 0){ 
       $parent_checkbox = $chk.closest("ul").prev(":checkbox").attr("checked", false); 
       uncheckParentIfSiblingsUnchecked($parent_checkbox); 
      } 
     } 
     }

它是遞歸的，因爲它必須'冒泡'到根複選框。希望這有助於。乾杯

來源

2011-07-02 10:54:55

下降者可以解釋爲什麼它是錯誤的？代碼不適用於我，Edgar， –

。 PS：我不是下來的選民。 –

如果在JQuery中未選中所有子項，則取消選中父節點

回答

相關問題