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?

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.

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/