根据按钮单击显示/隐藏表格行答案

【问题标题】：Show/hide table rows based on button click根据按钮单击显示/隐藏表格行
【发布时间】：2014-02-25 00:03:29
【问题描述】：

我想使用表格旁边的切换按钮来根据表格最后一列中的复选框是否被选中来隐藏或显示表格行。

这是表格的代码：

<table>
  <tr>
    <td>1<td>
    <td>Text<td>
    <td><input type="checkbox" class="form-checkbox" checked="checked"><td>
  </tr>
  <tr>
    <td>2<td>
    <td>Text<td>
    <td><input type="checkbox" class="form-checkbox"><td>
  </tr>
</table>

在侧边栏中我有这个按钮：

<a id="comtoggle" class="btn" href="#">Toggle</a>

在上面的示例中，如果单击切换按钮，我希望第 1 行消失，但如果再次单击切换按钮，它会重新出现。复选框的状态存储在数据库中，并通过 AJAX 函数保存（工作正常）。

这是我拥有的 jQuery。我认为我的问题是在第三行使用 .is(':checked') 。

$("#comtoggle").click(function() {
  if ($('.form-checkbox').is(':checked')) {
    $('.form-checkbox').is(':checked').closest('tr').toggle();
  }
});

有了这个 sn-p，我所有的行都消失了，Firebug 的控制台显示了这个错误：

TypeError: $target.offset(...) is null

不确定是否相关。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我想这就是你的意思。抓住小提琴：http://jsfiddle.net/7C423/1 您需要做的就是抓住您感兴趣的东西，然后去玩。

$("#comtoggle").click(function() {
      $(".form-checkbox:checked").closest("tr").toggle();
});

【讨论】：

猜猜我用 if 语句想太多了。现在隐藏列...谢谢。

【解决方案2】：

由于您是按类选择元素，因此您需要循环遍历它们，以防它们被选中隐藏一行。

$("#comtoggle").click(function() { $('.form-checkbox').each(function(chk){ if($(this).is(':checked')) $(this).closest("tr").toggle(); }); });

【讨论】：