JavaScript에서 라디오 버튼의 선택 및 선택 취소 상태를 어떻게 추적할 수 있습니까?

라디오 버튼에 대한 향상된 OnChange 처리기

이 기사에서는 라디오 버튼 그룹에 대한 onchange 이벤트를 효과적으로 처리하는 과제를 살펴봅니다. 기본적으로 라디오 버튼에 대한 JavaScript의 onchange 이벤트는 버튼이 선택 취소되었을 때가 아니라 선택되었을 때만 실행됩니다.

문제 이해

다중 라디오가 있는 시나리오를 고려해보세요. 양식 내에서 동일한 이름을 가진 버튼입니다. 양식이 제출되면 하나의 라디오 버튼만 선택되어야 하며 해당 값은 양식 데이터와 함께 전송됩니다. 그러나 onchange 이벤트는 선택된 버튼에서 다른 버튼으로의 전환을 캡처하는 메커니즘을 제공하지 않습니다.

이 동작은 새로 선택한 버튼과 이전에 선택한 버튼을 모두 추적해야 하는 상황에서 문제를 일으킬 수 있습니다. . 예를 들어 동적 형식에서는 라디오 버튼 선택의 변경 사항에 따라 특정 작업을 수행하거나 UI를 업데이트할 수 있습니다.

이벤트 리스너를 사용한 해결 방법

한 가지 해결 방법은 각 라디오 버튼의 변경 이벤트에 연결된 이벤트 리스너를 활용하는 것입니다. 각 버튼의 변경 이벤트를 개별적으로 수신함으로써 이전에 확인된 버튼을 추적할 수 있습니다.

<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>

이 코드에서는 라디오 버튼을 반복하고 각 버튼에 변경 리스너를 연결한 다음 이전에 선택한 버튼을 저장하려면 prev 변수를 정의하세요. 버튼의 변경 이벤트가 트리거되면 이전에 선택한 버튼(있는 경우)의 값을 검색하고, 이전 및 새로 선택한 버튼의 값을 모두 기록하고, 새로 선택한 버튼을 참조하도록 prev를 업데이트합니다.

이것은 접근 방식을 사용하면 라디오 버튼의 선택된 상태와 선택되지 않은 상태를 모두 캡처하여 보다 완전한 이벤트 처리 메커니즘을 제공할 수 있습니다.

위 내용은 JavaScript에서 라디오 버튼의 선택 및 선택 취소 상태를 어떻게 추적할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!