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>

以及根据用户签入的单选按钮应隐藏或显示的行。在本例中，只有当用户选择"Delivered"单选按钮时，才应显示下面的表行，否则应将其隐藏。

感谢

George

Answer 1

为单选按钮添加一个点击处理程序。如果选中，则可以转到$（this）.closest（'tr'）.next（）.hide（）

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

只需将onclick="$（this）.closest（'tr'）.next（）.hide（）；"添加为单选按钮的属性。

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