如何显示最靠近所选单选按钮的 <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>

我不确定如何在radio_Click() 函数中形成我的jQuery 以获得我正在寻找的东西。到目前为止，我尝试过的所有内容都会显示每个表的所有三个 <tr>，无论选择了哪个 Radiobutton。

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