>웹 프론트엔드 >JS 튜토리얼 >JQuery는 라디오 또는 checkbox_jquery의 변경 이벤트를 트리거합니다.

JQuery는 라디오 또는 checkbox_jquery의 변경 이벤트를 트리거합니다.

WBOY
WBOY원래의
2016-05-16 17:46:221338검색

오늘 아침에 기능을 만들고 싶은데요. 체크박스를 선택하면 숨겨진 레이어가 표시됩니다. 체크박스를 선택 해제하면 선택한 레이어가 숨겨집니다.
초기 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(function() {
$("#ischange").change(function() {
alert("checked");
});
}); 오랫동안 전혀 응답이 없었습니다. 바이두에서 검색해본 결과 일부 전문가들은 위의 코드 라인이 파이어폭스 등 브라우저에서 정상적으로 실행될 수 있다는 점, 즉 체크박스를 선택하거나 취소하면 대화상자가 뜨지만 IE에서는 정상적으로 실행되지 않는다는 점을 지적했다. 즉, 확인란을 선택하거나 선택 취소해도 대화 상자가 즉시 팝업되지 않습니다.
체크박스를 제외한 다른 곳을 클릭하기 전에 체크박스를 선택하거나 취소해야 합니다. 이는 IE가 변경 이벤트를 트리거하기 전에 체크박스가 포커스를 잃을 때까지 기다리기 때문이라고 합니다.
개선된 코드는 다음과 같습니다.



코드 복사 코드는 다음과 같습니다. $(function (){
if ($.browser.msie) {
$('input:checkbox').click(function () {
this.blur();
this .focus() ;
});
};
$("#ischange").change(function() {
alert("checked");
}); 🎜>}) ;



추가
: 체크박스 값을 변경한 후 IE는 포커스가 사라지기를 기다리고 있지만 클릭 이벤트가 즉시 발생하므로 클릭 이벤트는 확인란이 포커스를 잃게 만드는 데 사용되며, 이는 변경 이벤트를 트리거한 다음 다시 확인란으로 포커스를 전송합니다.
라디오인 경우 확인란을 라디오로 바꾸면 됩니다.
JQuery에서는 라디오 또는 체크박스에 변경 이벤트를 추가할 때 HTML에 다음 코드를 작성하는 것처럼 해당 값이 변경되면 변경 이벤트가 트리거됩니다.



코드 복사
그리고 JQuery를 사용하는 코드는 다음과 같습니다.



코드 복사
코드는 다음과 같습니다: $(document).ready(function(){ $("testCheckbox").change(function() {
Alert("Option selected !");
});
});


위 코드는 Firefox 등의 브라우저에서 체크를 선택하면 정상적으로 실행됩니다. 확인란을 선택하거나 취소하면 대화 상자가 나타나지만 IE에서는 제대로 작동하지 않습니다. 즉, 확인란을 선택하거나 취소하면 대화 상자가 즉시 나타나지 않습니다. 확인란을 제외한 다른 항목을 클릭하기 전에 확인란을 선택해야 하는 이유는 IE가 변경 이벤트를 트리거하기 전에 확인란이 포커스를 잃을 때까지 기다리기 때문이라고 합니다. 인터넷에서 해결책을 제공했습니다:



코드 복사
코드는 다음과 같습니다: $( function () {if ($.browser.msie) {$(' input:checkbox').click(function () { this.blur(); this.focus(); }});
위 코드는 체크박스만 추가하면 라디오에 적용할 수 있습니다. 위 코드의 원리는 체크박스의 값이 변경되면 IE는 포커스를 잃기를 기다리고 있지만 클릭이 발생한다는 것입니다. 이벤트가 즉시 트리거되므로 클릭 이벤트를 사용하여 확인란이 포커스를 잃게 만들고 변경 이벤트가 트리거된 다음 다시 확인란으로 포커스를 이동합니다. 어떤 사람들은 왜 클릭 이벤트를 직접 사용하여 변경 이벤트를 대체하지 않느냐고 물을 수 있습니다. 체크박스의 경우 클릭 이벤트와 변경 모두 동일한 기능을 수행할 수 있지만 라디오에서는 동일한 라디오를 계속 클릭하여 값을 변경할 수 있습니다. 변경이 없으면 클릭 이벤트는 계속 트리거되지만 변경 이벤트는 트리거되지 않습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.