根据选择的单选显示表格行答案

【问题标题】：Show table row based on radio selected根据选择的单选显示表格行
【发布时间】：2017-07-24 00:24:13
【问题描述】：

再次，再次，再次......我的 Javascript/jQuery 知识问题。这一次，我想在选择单选值时显示一行。我迷失了需要显示行的部分。

这是行：

            <tr class="others" id="others" style="display:none;">
            <th colspan="2"><?php _e('Others', 'shop'); ?></th>
            <td><?php echo fee; ?>&nbsp;&euro;</td>
            </tr>

这是 jquery：

      $(document).ready(function() {
      $('input').click(function(){
      var isChecked = $('#payment_method_paypal').prop('checked');
      // make the row appear appear if "payment_method_paypal" is checked
      });

我尝试使用 alert 并且它可以工作，但是对于行，我尝试了我在 Stack Overflow 和 google 上找到的每一个解决方案，但无法使其工作。

【问题讨论】：

标签： jquery checkbox html-table row show-hide

【解决方案1】：

您可以将布尔值传递给 jquerys toggle 方法

.toggle(showOrHide)

一个布尔值，指示是显示还是隐藏元素。

这应该可以工作

var isChecked = $('#payment_method_paypal').prop('checked');
$('#others').toggle(isChecked); //show/hide based on the bool

Fiddle

【讨论】：

酷伙伴！谢谢，作为魅力工作。我喜欢 javascript 的强大功能，但我讨厌它，因为它的库。有时你会浪费几个小时来寻找一个简单的方法。
@demlasjr 随时。一旦你开始它就很容易;-)

【解决方案2】：

试试

$('#others').hide();

和

$('#others').show();

隐藏和显示该行。

【讨论】：

试过了，已经配对，不起作用:(这里是一个例子：jsfiddle.net/brCr3
@Johan 不知道。然而，这就像一个例子，所以你也可以看到复选框，就像我没有添加的问题一样。当我说它不起作用时，我是说我在我的网站上尝试过，而不是在 jfiddle 上 :)
@demlasjr 我在我的评论中添加了一个小提琴

【解决方案3】：

html

<table>
<tr> <td>-------------------</td></tr>
<tr> <td class="trData">-------SHOW------</td></tr>
<tr> <td>-------------------</td></tr>
</table>

<div id="container">
  <input type="radio" name="colors" id="red" value="show" checked/>Show<br />
  <input type="radio" name="colors" id="blue" value="hide" />Hide<br />
</div>

$("#container").find("input[type=radio]:checked").on("click", function() {
    if($(this).attr('value')=='show')
    {
        $(".trData").show()
    }else{
        $(".trData").hide()
    }
});

JS2 更紧凑，但在这种情况下，您需要在单选按钮中设置正确的值

$("#container").find("input[type=radio]:checked").on("click", function(event) {
    var op= $(this).attr('value');
    jQuery.globalEval('$(".trData").'+op+'()')
});

DEMO

【讨论】：

live 已弃用，请使用 on。但在这种情况下不需要这样做，因为单选按钮不是动态生成的。
@AntonBaksheiev 谢谢。它工作得很好，但我选择了 Johan 解决方案，因为我只需要更改一个词。 :)