jquery : 체크 박스 그룹을 만들어 단일 이벤트를 발생시키는 방법은 무엇입니까?

Question

div에 체크 박스 그룹이 있고 모든 체크/체크 해제 기능을 사용합니다.

HTML :

<div id="available_options" class="input"> 
<ul class="inputs-list"> 
<li> 
    <label> 
    <input type="checkbox" name="options" id="option_1" /> 
    <span>Option1</span> 
    </label> 
</li> 
<li> 
    <label> 
    <input type="checkbox" name="options" id="option_2" /> 
    <span>Option2</span> 
    </label> 
</li> 
</ul> 
</div> 
<a id="check_all_options">Check all</a>/<a id="uncheck_all_options">Uncheck all</a> 

JQuery와 : 체크 박스가/선한 체크되지 않은 체크 할 때마다 내 경고가 발사되는 순간

$('#check_all_options').click(function(e){ 
     $('#available_options input').attr('checked', 'checked').change(); 
}); 

$('#uncheck_all_options').click(function(e){ 
     $('#available_options input').removeAttr('checked').change(); 
}); 

$('#available_options input').live('change', function(e){ 
     alert('test'); 
}); 

. 그러나 "모두 선택"/ "모두 선택 취소"를 사용하면 경고가 여러 번 발동됩니다 (각 확인란은 이벤트를 실행합니다). stopPropagation으로 시도했지만 원하는대로 할 수 없습니다.

수정 사항이있을 때마다 어떻게 하나의 이벤트를 발생시킬 수 있습니까? 나는 데이터베이스 쿼리를 시작하기 위해 선택되는 옵션을 얻을 수 있기를 원한다. checkall/uncheckall이 사용될 때 쿼리를 여러 번 실행하지 않습니다.

감사

Answer 1

재개시 코멘트 :

왜 당신은 명시 적으로 변경 이벤트를 트리거합니까? 모든 3 개의 핸들러에서 ajax/db 쿼리 함수를 호출하면됩니다. 예를 들어 jsfiddle을 참조하십시오.

Answer 2

뻔뻔 자기 홍보 : 당신은 내가이 정확한 작업을 위해 쓴 this jQuery plugin을 사용할 수 있습니다. 그것은 다음과 같이 보일 것입니다 : 당신이 체크 박스의 수를 넘어 reportTo 콜백에 더 많은 정보가 필요하면

$('#check_all_options').checkAll('#available_options input[type="checkbox"]', { 
    reportTo: function (numChecked) { 
     console.log(numChecked); 
    } 
}); 

, 난 강력하게 submit an issue하는 것이 좋습니다, 나는이 작은 프로젝트를 개선 작업 할 수 있습니다!

---

내 플러그인을 사용하고 싶지 않다면 너무 멋지다. 변경 사항에 대한 단일 이벤트 만 발생시키는 방식을 이해하고 작동 방식을 살펴볼 수 있습니다. 답변으로

Answer 3

은이 페이지에서 예를 볼 수 있습니다 http://briancray.com/2009/08/06/check-all-jquery-javascript/