jquery分組複選框

Question

我有一個國家名單。它分裂了3次。

[ ] World 
    [ ] Africa 
     [ ] Congo 
    [ ] Europe 
     [ ] Netherlands, the 
     [ ] Italy 

現在，如果我點擊世界，我希望所有的人都被檢查。 如果我點擊非洲，我只想要檢查剛果。 如果我點擊歐洲，意大利和荷蘭都應該檢查。 如果我點擊荷蘭，意大利和歐洲，應該檢查歐洲，點擊歐洲和非洲時也應該與世界一樣。 我想出了它下面的jQuery腳本：

$(function() { 
    $(":checkbox").click(function() { 
     var maxlevel = 3; 
     var level = $(this).attr("class").substring(5, 6); 
     var level_checked = $(this).attr("checked"); 
     //update children 
     $('input', $(this).parent('div')).each(function() { 
      var curlevel = $(this).attr("class").substring(5, 6); 
      if (curlevel > level) { 
       $(this).attr("checked", level_checked); 
      } 
     }); 
     //update parents? 
    }); 
}); 

我用下面的HTML代碼：

<div> 
    <input class="layer1" type="checkbox" />Layer1 <br /> 
    <div> 
     <input class="layer2" type="checkbox" />Layer2 <br /> 
     <div> 
      <input class="layer3" type="checkbox" />Layer3 <br /> 
      <input class="layer3" type="checkbox" />Layer3 <br /> 
     </div> 
    </div> 
    <div> 
     <input class="layer2" type="checkbox" />Layer2 <br /> 
     <div> 
      <input class="layer3" type="checkbox" />Layer3 <br /> 
      <input class="layer3" type="checkbox" />Layer3 <br /> 
     </div> 
    </div> 
</div> 

更新的兒童在點擊一些工作，但更新的父母單擊框時..我不知道如何做到這一點。我發現了兩塊代碼，但是它們只適用於複選框的「子組」，而不是像我的情況那樣。

任何人都可以幫助我嗎？

Answer 1

歡迎使用算法類。這裏是基本格式：

寫下問題，作爲可以回答的問題。這是第1步。

第2步，將答案寫下來作爲一系列步驟，並使每個步驟儘可能詳細。

第3步，將每個特定步驟轉換爲代碼或僞代碼（重複步驟3將僞代碼轉換爲代碼）。

恭喜，您現在已經在代碼中實現了算法。因此，對於您的具體問題，我將執行前兩步，並讓您執行第三步：

如何在點擊時檢查給定複選框的所有父複選框？

旁註：這是一個遞歸函數。任何被調用的複選框都可能需要調用它，但僅限於非兄弟檢查。所以你有兩條路線要考慮。我會考慮兄弟的路線。

還要考慮子元素的父元素可能是半可選或僅支持開/關狀態。我會在筆記中給SEMI打電話。根據SEMI是否有效，您將選擇一條路徑。

• 複選框被激活。
  • 有兩種狀態：複選框現在可以取消選中，或者現在可以檢查。
• 如果該複選框是現在選中
  • （SEMI）檢查，看是否有兄弟元素進行檢查，如果是這樣，標記父爲半選中或
  • 取消選中父如果半 - 檢查狀態不受支持。
• 如果複選框現在檢查
  • （SEMI）檢查，看是否有兄弟元素未被選中，如果是這樣，標記父爲半選中或
  • 檢查，看是否所有的兄弟姐妹元素被檢查
  • 如果所有的兄弟姐妹進行檢查，作爲託運
  • 其他標記父爲未選中
• 稱這種操作上的標記父元素的父元素，如果元素不是根元素

如何檢查所有兄弟複選框以確定其狀態？

• 獲得所有對於給定的元件
• 的同級元素的列表定義檢查一個變量，以及用於未經檢查一個變量，和可變的元件的總數目（計數器）
• 訪問在兄弟組中的每個複選框，並增加相應的計數器以選中或取消選中，並增加計數器變量，而不管增加哪一個計數器。
• 如果確定是否所有的兄弟姐妹未選中，則計數器比較於未選中
• 如果確定任何兄弟姐妹未選中，未選的值進行比較，以0（大於零指至少一個是未選中）
• 如果確定是否所有的兄弟姐妹被檢查時，計數器比較於所檢查的
• 如果確定任何兄弟姐妹被檢查時，檢查值進行比較，以0（大於零表示的至少一個被選中）

注意有更快/更容易的內聯方法來確定答案＃2，但取決於你如何抽象它，這是一個簡單的方法來實現，只需要維護在一個地方。

---

我不懷疑，當你張貼了這個問題，你所希望看到一個簡單的答案，雖然也有一些捷徑，這是最簡單的方式（也是最簡單的永遠是最易維護），這樣做的現在最簡單的方法。當你有特定的代碼時，你想優化，以後可以完成。

如果你在這裏幫助你，寫下長碼，你就可以完成你想要的任務。

Answer 2

$(function() { 
    var uncheck_parent = function(elt) { 

    var parent_div = elt.parent("div"), 
     parent_cb = parent_div.parent("div").children(":checkbox").first(); 

    if (parent_cb.length == 0) return;  

    parent_cb.attr("checked", false); 
    uncheck_parent(parent_cb); 
} 

$(":checkbox").click(function() { 
    var maxlevel = 3; 
    var level = $(this).attr("class").substring(5, 6); 
    var level_checked = $(this).attr("checked"); 
    //update children 
    $('input', $(this).parent('div')).each(function() { 
     var curlevel = $(this).attr("class").substring(5, 6); 
     if (curlevel > level) { 
      $(this).attr("checked", level_checked); 
     } 
    }); 
    //update parents? 
    if (!$(this).is(":checked")) { 
     uncheck_parent($(this)) 
    } 
}); 

}）;

Answer 3

我認爲這會做你想做的。儘管如此，我仍然無法測試它。基本上它會觸發一個複選框，當它決定這是必要時，單擊需要檢查的元素。它效率不高，但代碼非常簡單。

$(function() { 
    $(":checkbox").click(function() { 
     $this = $(this); 
     if $this.is(':checked').length != 0) { 
// We are UNCHECKING 
      //update children 
      $this.siblings('div').children('input').is(':checked').trigger('click'); 
      //update parents if necessary 
      var all_unchecked = true; 
      $this.siblings('input').each(function(){ 
       if($(this).is(':not(:checked')).length == 0) {all_unchecked = false} 
      } 
      if (all_unchecked) { 
       $this.parent().siblings('input').is(':checked').trigger('click'); 
      }); 
     } else { 
// We are CHECKING 
      //update children 
      $this.siblings('div').children('input').is(':not(:checked)').trigger('click'); 
      //update parents if necessary 
      var all_checked = true; 
      $this.siblings('input').each(function(){ 
       if($(this).is(':checked').length == 0) {all_checked = false} 
      } 
      if (all_checked) { 
       $this.parent().siblings('input').is(':not(:checked)').trigger('click'); 
      }); 
     } 
    }); 
});