>  기사  >  웹 프론트엔드  >  JavaScript에서 라디오 버튼의 선택 및 선택 취소 이벤트를 모두 처리하는 방법은 무엇입니까?

JavaScript에서 라디오 버튼의 선택 및 선택 취소 이벤트를 모두 처리하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-10-31 05:31:30629검색

How to Handle Both Check and Uncheck Events for Radio Buttons in JavaScript?

라디오 버튼에 대한 OnChange 이벤트: 선택 및 선택 취소 이벤트 처리

라디오 버튼을 사용하여 작업할 때 선택 및 선택 취소 이벤트를 효과적으로 처리하는 것이 중요합니다. 표준 onChange 이벤트는 라디오 버튼이 선택될 때만 트리거되므로 이를 충족하지 않습니다. 이로 인해 이전 선택 항목이 선택 취소된 시점을 식별하는 데 공백이 생깁니다.

OnChange 이벤트에 대한 해결 방법:

다음 코드 조각을 고려하세요.

<code class="js">var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}</code>

이 스크립트는 원하는 작업을 수행합니다. 동작:

  1. 모든 라디오에서 반복됩니다. 버튼.
  2. 각 라디오 버튼에 대해 이벤트 리스너가 onChange 이벤트에 추가됩니다.
  3. 라디오 버튼이 선택되면 이전에 선택한 라디오 버튼의 값이 기록됩니다(있는 경우). one) 현재 선택된 라디오 버튼에 대한 참조를 업데이트합니다.

이 솔루션은 선택 및 선택 취소 이벤트를 모두 캡처하여 이전 및 현재 선택된 라디오 버튼에 모두 액세스할 수 있도록 합니다.

OnClick 이벤트의 제한 사항:

onClick 이벤트는 브라우저 전반에 걸쳐 더 일관적이기는 하지만 여전히 확인되지 않은 이벤트 캡처 문제를 해결하지 못합니다. 따라서 특정 사용 사례에서는 고려될 수 있지만 라디오 버튼을 사용하여 선택 및 선택 취소 이벤트를 모두 처리하기 위한 완전한 솔루션은 아닙니다.

위 내용은 JavaScript에서 라디오 버튼의 선택 및 선택 취소 이벤트를 모두 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.