나는 다음을 가지고있다 :
<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
이벤트를 청취하십시오 . -
: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/
이 기능이 적용되지 않는 추가 기능이있는 사용자는 추가 기능을 제안하십시오 .
답변
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);
});
- 이벤트 핸들러는 계속 작동합니다
- 클릭이 아닌 키보드로 확인란을 변경하면 캡처됩니다.
답변
$('#myform input:checkbox').click(
function(e){
alert($(this).is(':checked'))
}
)
답변
asker가 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>
자바 스크립트 :
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');
}
});