如何使用jquery只檢查指定的複選框？

我有多個複選框。當我點擊適當的按鈕時，我想檢查並取消選中其中的一些或全部。如何使用jquery只檢查指定的複選框？

例如，當我點擊「全部檢查」按鈕時，我想要檢查所有按鈕。當我點擊「男性」按鈕時，我只想勾選「類別」等於「男性」的複選框。當我點擊「女性」按鈕時，我只想選中類別等於「女性」的複選框。當我點擊「無」按鈕時，我只想選中類別等於「無」的複選框。我怎麼用jQuery來做到這一點？

<br> 
<div> 
<input type="checkbox" class="check_all"> Check all 
<input type="checkbox" class="check_all_females"> Females 
<input type="checkbox" class="check_all_males"> Males 
<input type="checkbox" class="check_all_none"> None 
</div> 


<input type="checkbox" class='male'> John<BR> 
<input type="checkbox" class='male'> Maria<BR> 
<input type="checkbox" class='male'> Ali<BR> 
<input type="checkbox" class='male'> Tural<BR> 
<input type="checkbox" class='female'> John<BR> 
<input type="checkbox" class='female'> Fuass<BR> 
<input type="checkbox" class='female'> Jadsa<BR> 
<input type="checkbox" class='none'> Dasda<BR> 
<input type="checkbox" class='none'> Wers<BR> 
<input type="checkbox" class='none'> Saqa<BR>

來源

2011-11-21 Someone

這樣做：

$(function(){ 


$("div.mains input:checkbox").click(function(){ 
    var rel = $(this).attr("rel"), 
     checked = $(this).is(":checked"); 
    switch(rel) 
    { 
     case "all": 
      if(!checked) 
      { 
       $(".sub input:checkbox").removeAttr("checked"); 
      } 
      else 
      { 
       $(".sub input:checkbox").attr("checked", "checked"); 
      } 
     break; 
     default: 
      if(!checked) 
      { 
       $(".sub input." + rel).removeAttr("checked"); 
      } 
      else 
      { 
       $(".sub input." + rel).attr("checked", "checked"); 
      } 

    } 
}); 

});

HTML

<br> 
<div class="mains"> 
<input type="checkbox" rel="all" class="check_all"> Check all 
<input type="checkbox" rel="female" class="check_all_females"> Females 
<input type="checkbox" rel="male" class="check_all_females"> Males 
<input type="checkbox" rel="none" class="check_all_females"> None 
</div> 

<div class="sub"> 
<input type="checkbox" class='male'> John<BR> 
<input type="checkbox" class='male'> Maria<BR> 
<input type="checkbox" class='male'> Ali<BR> 
<input type="checkbox" class='male'> Tural<BR> 
<input type="checkbox" class='female'> John<BR> 
<input type="checkbox" class='female'> Fuass<BR> 
<input type="checkbox" class='female'> Jadsa<BR> 
</div>

嘗試這個小提琴：http://jsfiddle.net/2R2CC/

來源

2011-11-21 09:17:47 Niels

更新我的代碼，但它已經工作，增加了一些額外的功能，以取消所有的類型。 – Niels

''在'if（！checked）''之前''之前做'$（「。sub input：checkbox」）。removeAttr（「checked」）;' – Niels

我做了但沒有任何改變 – Someone

如何使用jquery只檢查指定的複選框？

回答

相關問題