Question

一直在寻找可能的解决方案，但我没有发现任何与我的问题相关的内容。

我有2个单选按钮，我想隐藏/显示表格的第2列，这将导致隐藏所有代理名称部分

我的代码：

HTML

<table>
<tr>
    <td>Agent ID</td>
    <td>Agent Name</td>
    <td>UserID</td>
</tr>
<tr>
    <td>Agent ID</td>
    <td>Agent Name</td>
    <td>UserID</td>
</tr>
<tr>
    <td>Agent ID</td>
    <td>Agent Name</td>
    <td>UserID</td>        
</tr>
</table>Agent Name OFF<input type="radio" checked="checked" name="hyoujiSentakushi" value="off">&nbspON<input type="radio" name="hyoujiSentakushi" value="on">

jquery的

$(function() {
   $('#hyoujiSentakushi').change(function() {
       $('td:nth-child(2)').toggle();
   });
});

在选择任何一个单选按钮时，代码似乎缺少某些东西。

Answer 1

您使用错误的选择器绑定更改事件。您需要名称值属性选择器来定位这些单选按钮。试试这个：

 $('[name=hyoujiSentakushi]').change(function() {
  $('td:nth-child(2)').toggle();
 });

Answer 2

为单选按钮提供ID或类

<input type="radio" checked="checked" class="rd" name="hyoujiSentakushi" value="off">&nbspON<input type="radio" class="rd" name="hyoujiSentakushi" value="on">

$('.rd').change(function() {
  $('td:nth-child(2)').toggle();
 });

或使用@Milind Anantwar的答案https://stackoverflow.com/a/23492200/2967572选择具有name属性的容器。!!

Answer 3

你可以这样做：

$(function () {
    $('input[name=hyoujiSentakushi]').change(function () {
        $('tr:nth-child(2) td').toggle(this.value == "on");
    });
});

<强> Fiddle Demo

使用jquery隐藏/显示列

3 个答案: