How to trigger OnChange Event of Radio Button when its UnChecked

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?

Would this work for you? http://stackoverflow.com/questions/11173685/how-to-detect-radio-button-deselect-event — user776686, Apr 22 '14 at 09:20
Maybe it's a matter of defining a precise context of the radio button, such as 'tr'? It'd help if you posted the code you're using. — user776686, Apr 22 '14 at 09:51
I am dynamically creating my rows and columns and creating Radio buttons in the TDs and binding OnChange Event with each radio button. — V.B, Apr 22 '14 at 10:16

user776686 · Answer 1 · 2014-04-23T07:35:52.983

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

How to trigger OnChange Event of Radio Button when its UnChecked

1 Answers1