Question

I have 3 tables on a page. Each of them contain two table rows.

The first <tr> holds a RadioButton. The second <tr> is set to display: none. I need to second <tr> to display when the RadioButton in that particular table was selected.

My HTML:

<table class="tableClass" style="width: 98%">   
    <tr>
       <td>
           <input type="radio" id="rbResource" onclick="radio_Click()" class="radioButton"       runat="server" />
       </td>  
    </tr>
    <tr class="displaySelection" style="display: none">
       <td>
           <span>Test</span>
       </td>
    </tr>
</table>

I’m not sure how to form my jQuery int the radio_Click() function to get what I’m looking for. Everything I’ve tried so far, displays all three <tr> of each table regardless of which Radiobutton was selected.

Answer 1

If I understand correctly, you need only 1 row to be visible each time, depending on the radiobutton pressed. To begin with, you should use name=”rbResource” (rather than id) to group the radiobuttons together. Then you can use something like this:

$(".radioButton").click( function(evt) {
    $(".radioButton").each( function( index, obj ) {
        var checked = $(obj).attr('checked')==true;
        var row = $(obj).closest('tr').next();
        if ( checked ) row.show();
        else row.hide();
    });
});