How to trigger OnChange Event of Radio Button when its UnChecked - radio-button

Question

I have a HTML table with rows and columns of course. There are radio buttons in each row and each row is one group of radio buttons means I can select only ONE radio button in the row from all the columns. I am trying to set a CSS on selection of a radio button cell in my table, this is fine but When I move to another radio button in the same row, being a radio button group the previous radio button is de-selected but the CSS remains there, because on selecting another radio in the group doesn't trigger the OnChange event for the radio which got de-selected automatically.
Is there any way to trigger onChange event on de-selecting the radio?

Answer 1

How about this: http://jsfiddle.net/2Z8Nt/14/
JS
$(function () {
// Create table and radios
for (var tri = 0; tri < 3; tri++) {
var $tr = $('<tr>').appendTo('table');
var $td = $('<td>').appendTo($tr);
for (var rai = 0; rai < 3; rai++) {
var $sp = $('<span class="radio-holder">');
var $rd = $('<input type="radio" name="rad-' + tri + '" class="rad" value="val-' + rai + '"/>').appendTo($sp);
$sp.append('Radio ' + tri + '' + rai);
$td.append($sp);
$tr.append($td);
}
}
// Record to keep track of radio selection
var selrad = {};
// Handler
$('input.rad').on('deselect', function () {
$(this).parents('.radio-holder').addClass('just-deselected')
}).each(function () {
$(this).on('click', function () {
var nm = $(this).attr('name');
$('input[name="' + nm + '"').parents('.radio-holder').removeClass('just-deselected');
if (selrad[nm]) {
selrad[nm].trigger('deselect');
}
selrad[nm] = $(this);
})
});
})
CSS
.radio-holder {
border: 1px solid silver;
margin: 3px;
padding: 3px;
}
.radio-holder.just-deselected {
border: 1px solid red;
}