如何使用 JQuery 显示带有单选按钮的隐藏表行答案

【问题标题】：How to display hidden table rows with radio buttons using JQuery如何使用 JQuery 显示带有单选按钮的隐藏表行
【发布时间】：2012-02-25 06:52:44
【问题描述】：

我有多个表格行，每行都有一组单选按钮（批准和拒绝）。当我选择拒绝时，我想在它下面显示一个隐藏的 tr，并且我正在使用 jquery 将 HTML 插入到 tr 中。当我选择 Approve 时，应该再次隐藏 tr。

当我在 Approve & Reject 单选按钮之间切换时，我无法让它完全按照我的解释工作，隐藏的 tr 会显示在所有行上。我希望它只显示在我单击的单选按钮下方。

我的小提琴：http://jsfiddle.net/4A7TD/

HTML：

<table>
  <tr>
    <td class="left">
        <input type="radio" name="approval1" value="approve" /> APP &nbsp; 
        <input type="radio" name="approval1" value="reject" /> REJ
    </td>
 </tr>
 <tr class="hiddenColumn">

 </tr>
 <tr>
    <td class="left">
        <input type="radio" name="approval2" value="approve" /> APP &nbsp;
        <input type="radio" name="approval2" value="reject" /> REJ
    </td>
 </tr>
 <tr class="hiddenColumn">

 </tr>
</table>

jQuery:

    $('.hiddenColumn').hide();

    $('input[type=radio]').change(function() {
     if ($(this).val() == 'reject') {
       $('.hiddenColumn').show();
       var showColumn = ($(this).closest('tr').next('tr'));
       showColumn.html('<td class="left">*Reason for Rejection<br /><textarea class="width350" name="reasonForRejection"></textarea></td>');
        } else if ($(this).val() == 'approve') {
            ($(this).closest('tr').next('tr')).hide();
       };
   });

【问题讨论】：

标签： jquery radio-button toggle hidden

【解决方案1】：

而不是change 使用click 事件并删除此行$('.hiddenColumn').show() 这是罪魁祸首。只需在您已经找到的那一行上调用 show 方法来显示下一行。此外，您可以在处理程序中使用this.value，而不是使用$(this).val() 来获取值。

   $('input[type=radio]').click(function() {
     var $nextTR = $(this).closest('tr').next('tr');
     if (this.value == 'reject') {
       $nextTR
       .html('<td class="left">*Reason for Rejection<br /><textarea class="width350" name="reasonForRejection"></textarea></td>')
       .show();
     } 
     else if (this.value == 'approve') {
        $nextTR.hide();
     };
   });

Demo

【讨论】：