Question

你好，有人会帮助我吗？

我正在尝试执行以下操作：

<table>
<thead> 
    <tr> 
        <th>Select</th> 
        <th>Name</th> 
    </tr>
</thead>    
<tr>
    <td>
        <input type="checkbox" class="toggle">
    </td>
    <td>
        Sam, Walls
    </td>
</tr>
<tr class="show">
    <td colspan="2">
        This is the info about Sam.
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" class="toggle">
    </td>
    <td>
        John, Doe
    </td>
</tr>
<tr class="show">
    <td colspan="2">
        This is the info about John.
    </td>
</tr>
</table>

单击带有class =“toggle”的复选框时，我只想显示它下面的行。

我的JavaScript代码效果不佳如下：

$('.show').hide();
$('.toggle').click(function(){
    $('.show').slideToggle();
});

目前它只会隐藏和切换Sam，Walls行。

编辑：在使用类而不是ID之后，隐藏问题似乎已经解决了。现在，当我单击一个复选框时，两个行都会一起切换。我更新了上面的代码。

任何帮助将不胜感激！

干杯。

Answer 1

我在评论中提到您不能拥有重复的ID，这也适用于您的#show元素。请改用next函数，以便按下任何项目，下一个元素将切换。类似的东西：

$('.show').hide();
$('.toggle').click(function(){
    $(this).closest('tr').next().slideToggle();
});

Answer 2

您可以使用您的课程并使用单击的索引进行切换...

$('.show').hide();
$('.toggle').click(function(){
    $('.show').eq($('.toggle').index(this)).slideToggle();
});

切换单击的行，使用JQuery复选框

2 个答案: