jquery로 지정된 체크 박스 만 확인하는 방법은 무엇입니까?

Question

여러 확인란이 있습니다. 해당 버튼을 클릭하면 일부 또는 전체를 선택하고 선택을 취소하고 싶습니다.

예를 들어 "모두 선택"버튼을 클릭하면 모든 버튼을 확인하고 싶습니다. "Male"버튼을 클릭하면 "class"가 "male"과 같은 체크 박스 만 선택하고 싶습니다. "여성"버튼을 클릭하면 클래스가 "여성"과 같은 확인란 만 선택하고 싶습니다. "None"버튼을 클릭하면 class가 "none"인 체크 박스 만 체크하고 싶습니다. 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> 

Answer 1

이 작업을 수행 :

$(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/