jQuery：根据选中的单选按钮隐藏或显示表格行

Question

无法采用此处找到的任何示例，因此我将其作为新问题发布。

我有几个表格行，一个带有单选按钮：

<tr id="catering-types">
    <td colspan="2">Catering Option</td>
    <td>
        <div class="catering-radio-option">
        <label><input type="radio" name="catering_type" id="pickup-only" value="pickup-only" checked="checked">
        Pickup Only</label>
        </div>
        <div class="catering-radio-option">
        <label><input type="radio" name="catering_type" id="delivered" value="delivered">Delivered</label>
        </div>
        <div class="catering-radio-option">
        <label><input type="radio" name="catering_type" id="fully-serviced" value="fully-serviced">Fully Serviced</label>
        </div>
    </td>
</tr>

根据用户在单选按钮中签入的内容，应隐藏或显示其下方的行。在本例中，只有在用户选择“已交付”单选按钮时才应显示下面的表格行，否则应隐藏。

谢谢

乔治

Answer 1

为单选按钮添加一个点击处理程序。 如果选中，那么你可以去 $(this).closest('tr').next().hide();

最接近 是您需要的神奇功能。它向上搜索正确的选择器。

只需添加 onclick="$(this).closest('tr').next().hide();"作为单选按钮的属性。

这将隐藏 在餐饮类型行之后的行。单击处理程序中的选择器当然必须针对其他类型进行更改。