라디오 버튼 선택 취소 이벤트를 캡처하는 방법: onChange 제한을 넘어서

라디오 버튼 혼란: onChange 제한 해결

라디오 버튼은 단일 선택을 처리하는 편리한 방법을 제공하지만 전체 상태 변경을 캡처하는 것은 도전적이다. 이름이 같은 라디오 버튼이 여러 개 있고 선택과 선택 취소를 모두 추적해야 하는 시나리오를 생각해 보세요.

onChange 이벤트는 당연한 선택처럼 보이지만 라디오 버튼이 선택 취소되면 실행되지 않습니다. 이로 인해 선택된 이벤트와 선택되지 않은 이벤트를 모두 캡처해야 하는 시나리오에서 문제가 발생합니다.

해결 방법

한 가지 해결 방법은 addEventListener 메소드를 활용하고 변경 이벤트 핸들러를 연결하는 것입니다. 각 라디오 버튼에. 이벤트 핸들러 내에서 변수를 사용하여 이전에 선택한 라디오 버튼(prev)에 대한 참조를 유지할 수 있습니다.

라디오 버튼이 선택되면 이전 값(prev.value)과 현재 값을 모두 기록합니다. 값(this.value). 이를 통해 선택된 이벤트와 선택되지 않은 이벤트를 모두 캡처할 수 있습니다.

<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)
    });
}

동반된 HTML 코드:

<code class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form></code>

이 해결 방법을 사용하면 모든 라디오에 대한 onChange 이벤트를 캡처하는 일반화된 솔루션을 갖게 됩니다. 선택 취소 이벤트를 포함한 버튼.

위 내용은 라디오 버튼 선택 취소 이벤트를 캡처하는 방법: onChange 제한을 넘어서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!