How Can You Track Both Checked and Unchecked States of Radio Buttons in JavaScript?

Improved OnChange Handler for Radio Buttons

In this article, we explore the challenge of handling onchange events for radio button groups effectively. By default, JavaScript's onchange event for radio buttons fires only when a button is checked, not when it is unchecked.

Understanding the Problem

Consider a scenario with multiple radio buttons with the same name within a form. When a form is submitted, only one radio button is expected to be selected and its value is sent with the form data. However, the onchange event doesn't provide a mechanism to capture the transition from one button being selected to another.

This behavior can pose a problem in situations where you need to track both the newly checked and previously checked buttons. For instance, in a dynamic form, you may want to perform specific actions or update the UI based on the changes in the radio button selection.

Workaround Using Event Listeners

One workaround is to utilize event listeners attached to each radio button's change event. By listening to the change event of each button individually, we can keep track of the previously checked button.

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

In this code, we loop through the radio buttons, attach a change listener to each one, and define a variable prev to store the previously checked button. When a button's change event is triggered, we retrieve the value of the previously checked button (if any), log both the previous and the newly checked button's values, and update prev to reference the newly checked button.

This approach allows us to capture both the checked and unchecked states of radio buttons, providing a more complete event handling mechanism.

The above is the detailed content of How Can You Track Both Checked and Unchecked States of Radio Buttons in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!