如何使用jQuery來選擇某些複選框

Question

考慮一個簡單的.aspx頁面。本頁有幾個部分，每個部分都有一個帶複選框控件的標題。選中後，它將選擇頁面該部分內的其他複選框。可以把它看作是「選擇本節所有內容」選項，而不是「在頁面上全選」。我想通過jQuery做到這一點，但無法弄清楚如何保持所有複選框不被選中，而不是僅僅在那個特定的子部分中。

Answer 1

嘗試一些這樣的事

可以爲UR頭和sub_header這樣

<div class="header"> 
    <input id="xx" type="checkbox" /> Header #1 
    <div class="sub_header"> 
     <input class="cc" type="checkbox" /> 
     <input class="cc" type="checkbox" /> 
     <input class="cc" type="checkbox" /> 
    </div> 
<div> 
<div class="header"> 
    <input type="checkbox" /> Header #2 
    <div class="sub_header"> 
     <input class="cc" type="checkbox" /> 
     <input class="cc" type="checkbox" /> 
     <input class="cc" type="checkbox" /> 
    </div> 
<div> 

創建包裝的div然後檢查是否選擇了頭複選框，然後選擇下一個子div元素中的sub_header，如下所示

$(document).ready(function(){ 
    $(".header input:checkbox").click(function(){ 
    if($(this).is(":checked")){ 
      $(this).parent("div.header").children("div.sub_header").find("input.cc").attr("checked","checked"); 
}else{ 
      $(this).parent("div.header").children("div.sub_header").find("input.cc").attr("checked",false); 
    } 
}); 

}）;

我覺得你可以縮短jQuery選擇... check this

Answer 2

將每個部分放置在一個div和div中，並將每個部分放在一個類名中，或者在每個複選框上給他們一個名稱作爲部分名稱。

<input type=checkbox class="Section1"> 

然後在jquery的

$("input:checkbox:checked.Section1")應該是與一類SECTION1

或

input:checkbox:not(:checked).Section1 

上述所有項目的選擇是未測試的

Answer 3

的最佳方式將在每個部分添加一個類，例如se ction1，section2等 比目標中的所有複選框。 例如：

$('.section1 input:checkbox').checked == true 

Answer 4

檢查部分的複選框通過使用各部分定義爲您的分隔符的HTML元素。

例如：

<div id="section1"> 
    <input type="checkbox" id="section1controller" /> 

    <input type="checkbox" id="section1checkbox1" />  
    <input type="checkbox" id="section1checkbox2" /> 
    <input type="checkbox" id="section1checkbox3" /> 
</div> 

<script> 
    $('#section1controller').bind('click', function() {  
    if($(this).is(':checked')) { 
     $('#section1controller').find('input[type="checkbox"]').attr('checked','checked'); 
    } 
    else { 
     $('#section1controller').find('input[type="checkbox"]').removeAttr('checked','checked'); 
    } 
    }); 
</script>