jQuery 확인란 이벤트 처리

jQuery 확인란 이벤트 처리

다음 항목이 있습니다.

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

jQuery를 사용하여 다음에서 발생하는 체크 이벤트를 캡처하려면 어떻게 합니까?myform어떤 확인란이 토글되었는지 확인합니다(그리고 토글되었는지 확인).

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

변경 이벤트를 사용합니다.

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

몇 가지 유용한 답변이 있지만 최신 옵션을 모두 포함하는 답변은 없는 것 같습니다.이를 위해 제 모든 예는 또한 일치하는 존재를 충족시킵니다.label및.console.log).

• 듣기click에한사건에 있는 checkboxes키보드를 전환하거나 일치하는 위치에서 변경할 수 없기 때문에 좋은 생각이 아닙니다.label요소가 클릭되었습니다.항상 다음을 듣습니다.change이벤트

• jQuery »:checkbox대신에, 사이비 종교.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');
    }
});

JSFidle: 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');
    }
});

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

주의:

• 을 듣는 이에는 사건을 듣습니다).change 하지 않는 요소까지 (이 (이경우변지않경상버업요다합니블소로위는되)이▁(▁element▁)다업)#myform).
• 그런 다음 jQuery 선택기(':checkbox'이 경우)는 버블 체인의 요소에만 적용됩니다.
• 그런 다음 이벤트를 발생시킨 일치 요소에만 이벤트 핸들러 기능을 적용합니다.
• 사용하다document더 가깝거나 효율적인 이벤트 처리기가 없는 경우 위임된 이벤트 처리기를 연결하는 기본값으로 사용됩니다.
• 을 사용하지 .body마우스 이벤트 가져오기를 중지할 수 있는 버그(스타일링과 관련)가 있으므로 위임된 이벤트를 첨부합니다.

위임된 처리기의 결과는 일치하는 요소가 이벤트 처리기가 등록되었을 때가 아니라 이벤트 시간에만 존재하면 된다는 것입니다.이렇게 하면 동적으로 추가된 콘텐츠가 이벤트를 생성할 수 있습니다.

Q: 더 느립니까?

A: 이벤트가 사용자 상호 작용 속도에 있는 한 위임된 이벤트 처리기와 직접 연결된 처리기 간의 속도 차이는 무시할 수 있습니다.위임의 이점은 사소한 단점보다 훨씬 큽니다.위임된 이벤트 처리기는 일반적으로 일치하는 단일 요소에 연결되므로 실제로 등록 속도가 더 빠릅니다.

---

그렇지 않은 이유prop('checked', true)해고하다, 해고.change 이벤트?

이것은 사실 디자인에 의한 것입니다.만약 그것이 이벤트를 유발한다면 당신은 쉽게 끝없는 업데이트의 상황에 빠질 것입니다.속성을 합니다.trigger(아닙니다.triggerHandler):

예를들없는어는 없이trigger이벤트가 발생하지 않음

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

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

를예들어와 함께trigger가 잡혔습니다.

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

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

주의:

• 을 사용하지 .triggerHandler한 사용자가 제안한 대로 이벤트를 위임된 이벤트 처리기로 버블링하지 않습니다.

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

요소에 직접 연결된 이벤트 핸들러에서는 작동하지만,

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

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

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

이에 해당되지 않는 추가 기능을 가진 사람이 있다면 추가 기능을 제안하십시오.

jQuery(1.7)의 새로운 'on' 방법 사용: http://api.jquery.com/on/

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

    });

• 이벤트 핸들러가 계속 작동합니다.
• 확인란이 키보드로 변경된 경우 캡처됩니다. 클릭만 클릭하는 것이 아닙니다.

질문자가 구체적으로 jQuery를 요청했고 선택한 답변이 정확하다는 사실을 인정하면서, 이 문제는 실제로 말당 jQuery가 필요하지 않다는 점에 유의해야 합니다.만약 누군가가 그것 없이 이 문제를 해결하기를 원한다면, 간단히 설정할 수 있습니다.onClick다음과 같이 추가 기능을 추가하려는 확인란의 속성:

HTML:

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

Javascript:

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

피들: http://jsfiddle.net/Y9f66/1/

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

저는 첫 번째 답변의 코드를 시도해 보았습니다. 작동하지 않지만 저는 놀고 있고 저를 위해 이 작업을 하고 있습니다.

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

언급URL : https://stackoverflow.com/questions/3442322/jquery-checkbox-event-handling