Как отобразить скрытый <tr>ближайший к выбранной радиокнопке <tr>

Question

У меня есть 3 таблицы на странице. Каждая из них содержит две строки таблицы.

Первый <tr> содержит кнопку RadioButton. Второй <tr> настроен на отображение: нет. Мне нужно секунд <tr> для отображения, когда была выбрана RadioButton в этой конкретной таблице.

Мой 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>

Я не уверен, как сформировать мой jQuery для функции radio_Click(), чтобы получить то, что я ищу. Все, что я до сих пор пробовал, отображает все три <tr> каждой таблицы независимо от того, какая кнопка выбрана.

Answer 1

Если я правильно понимаю, вам нужно, чтобы каждый раз была видна только 1 строка, в зависимости от нажатой кнопки.Для начала вы должны использовать name = "rbResource" (а не id), чтобы сгруппировать радиокнопки вместе.Тогда вы можете использовать что-то вроде этого:

$(".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();
    });
});

Answer 2

$('input:radio').on('click', function(){
   $(this).closest('tr').next().show();
});

ИЛИ,

$('input:radio').click(function(){
   $(this).closest('tr').next('tr').show();
});