title: Show/hide table rows based on button click
body: <p>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.</p>
  
  <p>Here is the code for the table:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;td&gt;
      &lt;td&gt;Text&lt;td&gt;
      &lt;td&gt;&lt;input type="checkbox" class="form-checkbox" checked="checked"&gt;&lt;td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;td&gt;
      &lt;td&gt;Text&lt;td&gt;
      &lt;td&gt;&lt;input type="checkbox" class="form-checkbox"&gt;&lt;td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>In the sidebar I have this button:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a id="comtoggle" class="btn" href="#"&gt;Toggle&lt;/a&gt;
  </code></pre>
  
  <p>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).</p>
  
  <p>Here is the jQuery I have. I think my problem is using the <strong>.is(':checked')</strong> in the 3rd line. </p>
  
  <pre class="lang-jquery prettyprint-override"><code>$("#comtoggle").click(function() {
    if ($('.form-checkbox').is(':checked')) {
      $('.form-checkbox').is(':checked').closest('tr').toggle();
    }
  });
  </code></pre>
  
  <p>With this snippet, all of my rows disappear, and the console of Firebug shows this error:</p>
  
  <p><code>TypeError: $target.offset(...) is null</code></p>
  
  <p>Not sure if it is related.</p>