Radio button group - change events for buttons become deselected?

Question

Let's say I have a group of two radio buttons:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>

It seems that clicking the second button triggers an event handler on that button only. However, the first button does become deselected, and visually does change. Can anyone verify that events are fired only on the button that was selected, and not any of the other buttons in the group which become deselected as a result of the click? Any clever ways to watch a radio button for a deselecting event?

Kevenkeverian

Please select an answer as the correct one, or specify what further information you need in order to solve your issue. – Beach

Answer 1

Although it cannot be confirmed, but the event change triggers don't happen on the entire group.

If you want that to happen, you can do it using various JS libraries like jQuery, YUI, etc. or even plain javascript, as follows:

function buttonGroupChange(){
    var radioElements = document.getElementsByName("radio_group_name");
    for(var i = 0; i < radioElements.length; i++){
        if(radioElements[i].checked == true){
             //do something
        }
        else{
            //do something
        }
    }
}

This function can be called on the onClick or the onChange event.

I hope that solves your problem.

Creosol

Answer 2

Firstly, it is important to note that a "Click" event on any of the radios fires AFTER the "checked" value is already updated. This is important - because it means you can't detect the previous item once the event is already fired. If you Cancel the event, you are actually changing the value BACK - not stopping it initially. This is important to how you approach the problem.

Example:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>

// At this point, the ':checked' item is button1.
$('input[type=radio]').bind('click', function (ev) {
    // If you click on button2 - by this point, the ':checked' item is already button2.
    ev.preventDefault(); // These two lines will stop the radio from actually 
    ev.stopPropagation(); // changing selection.

    // At this point, the ':checked' item is set BACK to button1.
});

Because of this, the easiest solution is to track the "last" selected item in a closure alongside your event handlers, as follows:

<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>

<script type="text/javascript">
    var $last = $('[name=radioButtonGroup]:checked');

    // Select the radio buttons as a group.
    var $radios = $('[name=radioButtonGroup]').bind('change', function (ev) {
        // Click event handler
        var $clicked = $(ev.target); // This is the radio that just got clicked.
        $last.trigger('unclick'); // Fire the "unclick" event on the Last radio.

        $last = $('[name=radioButtonGroup]:checked'); // Update the $last item.

        // Should see the clicked item's "Value" property.
        console.log("Clicked " + $clicked.attr('value'), $clicked, ev);
    }).bind('unclick', function (ev) {
        // Handler for our new "unclick" event.
        // - fires whenever a radio loses focus.
        var $unclicked = $(ev.target); // The radio losing it's checked status.

        // Should see the unclicked item's "Value" property.
        console.log("Unclicked " + $unclicked.attr('value'), $unclicked, ev); 
    });
</script>

For a working example, see:

http://jsfiddle.net/TroyAlford/wvrtC/

Beach

Answer 3

I can't confirm that an event is only fired for the selected button, but if you needed to do something with the button that was just deselected, the following would work:

$(document).ready(function(){   
    var selectedRadio = null;
    $("input:radio").change(function(){        
        if(selectedRadio != null){
           alert(selectedRadio.val());   
        }
        selectedRadio = $(this);
    });
});

In action here.

If you need to keep track of multiple groups of radio buttons, you could do it with an array of currently selected buttons and match within that array when a change is detected.

Heribertoheringer

Thanks Pat. I'll probably build my own radio group reprentation in JS, which will work, just not as pretty as being able to hook in to event handlers for each button. – Kevenkeverian

Answer 4

The simple nature of the radio button set is that only one button can be selected at a time. Selecting a button automatically means the others are not selected, but there is no specific action for deselecting. Therefore, you only need to worry about the one event, because it affects all the buttons in the set at one time.

If you would like to use an element that allows for multiple selections try checkboxes.

Celom