Question

I have a page with a javascript function that changes which radio buttons are selected as follows:

if ($('#tables').hasClass('radiobuttons')){
    var tables = $('#tables').find('table'),
        rows = tables.find('tr'),
        radios = $('input[type="radio"]');

    rows.live('click', function(){
        var clicked = $(this);
        clicked.find('input[type=radio]').attr('checked', true);
        clicked.parent().find('tr').removeClass('selected');
        clicked.addClass('selected');
    });
}

Basically, this is allowing the user to click anywhere on a row in a table, and the corresponding radio button will be selected.

The radio buttons all have an onchange event attached to them – except that function does not get called when the radio button is selected this way.

<input type="radio" onchange="someFunction();" name="myradiobutton" value="123">

How can I detect that the value has changed other than with the onchange event?

Answer 1

Instead of setting the attribute on the radio button, try triggering a click event instead.

clicked.find('input[type=radio]').trigger("click");

Alternatively, you might try binding your click event handler to the row the user clicks on, instead of (or in addition to) the actual radio button.