Show/hide table rows based on button click

Question

I want to use a toggle button next to a table to hide or show table rows based on the whether or not a checkbox in the last column of the table is checked.

Here is the code for the table:

<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>

In the sidebar I have this button:

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

In the above example, I would like for row 1 to disappear if the Toggle button is clicked, but have it reappear if the toggle button is clicked again. The state of the checkbox is stored in a database and is saved via an AJAX function (which works fine).

Here is the jQuery I have. I think my problem is using the .is(':checked') in the 3rd line.

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

With this snippet, all of my rows disappear, and the console of Firebug shows this error:

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

Not sure if it is related.

Answer 1

I suppose this is what you mean. Catch the fiddle aswell: http://jsfiddle.net/7C423/1 All you need to do is just grab that what you are interested in and play the ball.

$("#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(); }); });