How to detect radio button deselect event?

Question

Is there an easy way to attach a "deselect" event on a radio button? It seems that the change event only fires when the button is selected.

HTML

<input type="radio" id="one" name="a" /> <input type="radio" id="two" name="a" /> 

JavaScript

$('#one').change(function() {     if(this.checked) {         // do something when selected     } else { // THIS WILL NEVER HAPPEN         // do something when deselected     } });​ 

jsFiddle ​

Answer 1

Why don't you simply create a custom event like, lets say, deselect and let it trigger on all the members of the clicked radio group except the element itself that was clicked? Its way easier to make use of the event handling API that jQuery provides that way.

HTML

<!-- First group of radio buttons --> <label for="btn_red">Red:</label><input id="btn_red" type="radio" name="radio_btn" /> <label for="btn_blue">Blue:</label><input id="btn_blue"  type="radio" name="radio_btn" /> <label for="btn_yellow">Yellow:</label><input id="btn_yellow" type="radio" name="radio_btn" /> <label for="btn_pink">Pink:</label><input id="btn_pink"  type="radio" name="radio_btn" /> <hr /> <!-- Second group of radio buttons --> <label for="btn_red_group2">Red 2:</label><input id="btn_red_group2" type="radio" name="radio_btn_group2" /> <label for="btn_blue_group2">Blue 2:</label><input id="btn_blue_group2"  type="radio" name="radio_btn_group2" /> <label for="btn_yellow_group2">Yellow 2:</label><input id="btn_yellow_group2" type="radio" name="radio_btn_group2" /> <label for="btn_pink_group2">Pink 2:</label><input id="btn_pink_group2"  type="radio" name="radio_btn_group2" /> 

jQuery

// Attaching click event handlers to all radio buttons... $('input[type="radio"]').bind('click', function(){     // Processing only those that match the name attribute of the currently clicked button...     $('input[name="' + $(this).attr('name') + '"]').not($(this)).trigger('deselect'); // Every member of the current radio group except the clicked one... });  $('input[type="radio"]').bind('deselect', function(){     console.log($(this)); }) 

​Deselection events will trigger only among members of the same radio group (elements that have the same name attribute).

jsFiddle solution

EDIT: In order to account for all possible placements of the attached label tag (wrapping the radio element or being attached through an id selector) it is perhaps better to use onchange event to trigger the handlers. Thanks to Faust for pointing that out.

$('input[type="radio"]').on('change', function(){     // ... } 

Answer 2

You can create a custom "deselect" event relatively painlessly, but as you've already discovered the standard change event is only triggered on the newly checked radio button, not on the previously checked one that has just been unchecked.

If you'd like to be able to say something like:

$("#one").on("deselect", function() {     alert("Radio button one was just deselected"); }); 

Then run something like the following function from your document ready handler (or put the code directly in your document ready handler):

function setupDeselectEvent() {     var selected = {};     $('input[type="radio"]').on('click', function() {         if (this.name in selected && this != selected[this.name])             $(selected[this.name]).trigger("deselect");         selected[this.name] = this;     }).filter(':checked').each(function() {         selected[this.name] = this;     }); } 

Working demo: http://jsfiddle.net/s7f9s/2

What this does is puts a click handler on all the radios on the page (this doesn't stop you adding your own click event handlers to the same radios) that will check if there was a previously selected radio in the same group (i.e., with the same name) and if so trigger a "deselect" event on that radio. Then it saves the just-clicked one as the current one. The "deselect" event is not triggered if you click the already checked radio or if there was no previously checked one. The .filter().each() bit at the end is to make note of which radios are already selected. (If you need to cater for more than one form on the same page having independent radio groups of the same name then update the function above accordingly.)