Question

我想使用表旁边的切换按钮来隐藏或显示表行，具体取决于是否检查了表格最后一列中的复选框。

以下是表格的代码：

<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。我认为我的问题是在第3行使用 .is（'：checked'）。

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

使用此代码段，我的所有行都会消失，Firebug的控制台会显示此错误：

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

不确定它是否相关。

Answer 1

我想这就是你的意思。抓住小提琴：http://jsfiddle.net/7C423/1 所有你需要做的就是抓住你感兴趣的东西并开球。

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

Answer 2

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

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

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

2 个答案: