[html] jQuery 체크 박스 이벤트 처리

몇 가지 유용한 답변이 있지만 모든 최신 옵션 을 다루지는 않습니다 . 이를 위해 필자의 모든 예제는 일치하는 label요소가 있는지 확인하고 확인란을 동적으로 추가하고 결과를 측면 패널에 표시합니다 (리디렉션 console.log).

• 듣기 click에 행사하는 checkboxes것입니다 하지 그 키보드 토글 또는 일치하는 경우 변경 사항을 허용하지 않으므로 좋은 아이디어 label요소를 클릭했다. 항상 change이벤트를 청취하십시오 .

• :checkbox대신 jQuery 의사 선택기를 사용하십시오 input[type=checkbox]. :checkbox더 짧고 읽기 쉽습니다.

• is()jQuery :checked의사 선택기 와 함께 사용 하여 확인란이 선택되어 있는지 테스트합니다. 이것은 모든 브라우저에서 작동합니다.

기존 요소에 첨부 된 기본 이벤트 핸들러 :

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle : http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

노트:

• 용도 :checkbox사용하는 것이 바람직하다 선택기를,input[type=checkbox]
• 이벤트가 등록 될 때 존재하는 일치하는 요소 에만 연결 됩니다 .

상위 요소에 연결된 위임 된 이벤트 핸들러 :

위임 된 이벤트 핸들러는 요소가 아직 존재하지 않는 (동적으로로드되거나 생성 된) 상황에 맞게 설계되었으며 매우 유용합니다. 그들은 조상 요소 (따라서 용어)에 책임을 위임 합니다.

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle : http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

노트:

• change변경되지 않는 조상 요소 ( 이 경우 )로 버블 링하는 이벤트 (이 경우 )를 수신하여 작동합니다.#myform .
• 그런 다음 jQuery 선택기 ( ':checkbox'이 경우)를 버블 체인 의 요소에만 적용합니다. .
• 그런 다음 이벤트 핸들러 기능을 이벤트를 일으킨 일치하는 요소에만 적용합니다.
• 사용 document아무것도 가까이 / 편리한없는 경우 기본값으로는 위임 된 이벤트 핸들러를 연결합니다.
• body마우스 이벤트 수신을 중지 할 수있는 버그 (스타일링 관련)가 있으므로 위임 된 이벤트를 첨부 하는 데 사용하지 마십시오 .

위임 처리기의 결과는 일치하는 요소 가 이벤트 처리기 등록 시가 아니라 이벤트 시간 에만 존재해야한다는 것 입니다. 이를 통해 동적으로 추가 된 컨텐츠가 이벤트를 생성 할 수 있습니다.

Q : 느려요?

A : 너무 오래 이벤트가 사용자 상호 작용의 속도로 한, 당신이에 대해 걱정할 필요가 없습니다 무시할 위임 된 이벤트 핸들러와 직접 연결된 처리기 사이의 속도 차이. 대표단의 이점은 사소한 단점보다 훨씬 큽니다. 위임 된 이벤트 핸들러는 일반적으로 단일 일치 요소에 연결 되므로 실제로 등록 하는 것이 더 빠릅니다 .

왜하지 않는 prop('checked', true)화재 change이벤트를?

이것은 실제로 의도적으로 설계된 것입니다. 이벤트가 시작되면 끝없는 업데이트 상황에 쉽게 빠질 수 있습니다. 대신 checked 속성을 변경 한 후 trigger(not triggerHandler)을 사용하여 변경 요소를 동일한 요소에 보냅니다 .

예. trigger사건이없는 경우

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle : http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

예를 trigger들어 정상적인 변경 이벤트가 잡히면

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle : http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

노트:

• 위임 된 이벤트 핸들러에 triggerHandler이벤트를 버블 링하지 않으므로 한 사용자가 제안한대로 사용하지 마십시오 .

JSFiddle : http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

그것은 비록 됩니다 이벤트 핸들러 작동 에 직접 연결 요소에 :

JSFiddle : http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

.triggerHandler ()로 트리거 된 이벤트는 DOM 계층을 버블 링하지 않습니다. 대상 요소가 직접 처리하지 않으면 아무 것도 수행하지 않습니다.

참조 : http://api.jquery.com/triggerhandler/

이 기능이 적용되지 않는 추가 기능이있는 사용자는 추가 기능을 제안하십시오 .

답변

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});