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

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

我不能让它完全按照我解释的方式工作，当我在批准和拒绝单选按钮之间切换时，隐藏的tr会显示在所有行上。 我希望它只显示在我点击的单选按钮下面。

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

HTML：

 
 
  APP    REJ 
 
 
 
 
 
  APP    REJ 
 
 
 
  

JQuery的：

  $('.hiddenColumn').hide(); $('input[type=radio]').change(function() { if ($(this).val() == 'reject') { $('.hiddenColumn').show(); var showColumn = ($(this).closest('tr').next('tr')); showColumn.html('*Reason for Rejection
'); } else if ($(this).val() == 'approve') { ($(this).closest('tr').next('tr')).hide(); }; }); 

Answer 1

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

  $('input[type=radio]').click(function() { var $nextTR = $(this).closest('tr').next('tr'); if (this.value == 'reject') { $nextTR .html('*Reason for Rejection
') .show(); } else if (this.value == 'approve') { $nextTR.hide(); }; }); 

演示