jQuery：隐藏或显示基于单选按钮检查的表格行

无法采用此处找到的任何示例，因此我会将其作为新问题发布。jQuery：隐藏或显示基于单选按钮检查的表格行

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

<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”单选按钮，则只显示下面的表格行，否则应该隐藏。

感谢

乔治

来源

2012-02-09 Mamaduka

你可以定制在以下答案 [http://stackoverflow.com/questions/9115364/how-to-display-hidden-table-rows-with-radio-buttons-using-jquery] [1] [1]：http://stackoverflow.com/questions/9115364/how-to-display-hidden-table-rows-with-radio-buttons-using-jquery – 2012-02-09 12:50:28

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

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

只需添加onclick =“$（this）.closest（'tr'）。next（）。hide（）;”作为单选按钮的属性。

这会隐藏餐饮类型行之后的行。点击处理程序中的选择器当然必须改变其他类型。

来源

2012-02-09 13:47:20 Karlth

感谢建议，你可以更新它，并包括单选按钮单击处理程序部分？再次感谢。 – Mamaduka 2012-02-09 13:54:15

不确定内联js是不是个好主意。试着用'.live'（'change'function（）{}'，最接近tr没有工作，但目标tr id和使用'hide（）'工作。 – Mamaduka 2012-02-09 15:31:23

jQuery：隐藏或显示基于单选按钮检查的表格行

回答

相关问题