title: A proper select all checkbox in a grid header
body: <p>I've inherited a new project and my jQuery skills are extremely weak. I'm looking to create a select all checkbox for a table.</p>
  
  <hr>
  
  <h2>The background:</h2>
  
  <p>The table exists with a column for checkboxes. As part of the header row, there's a checkbox called "Select All" that doesn't perfectly function. You can press it and it will select all, but it will "sort" a few items (for no reason) and the box will uncheck itself when finished. This makes things difficult. Code clip:</p>
  
  <pre><code>&lt;thead class="KoTableTH"&gt;
      &lt;tr data-bind="click: sort"&gt;
          &lt;th&gt;
              &lt;input type="checkbox" id="cbSelectAll1" /&gt;Select All
          &lt;/th&gt;
          &lt;th id="FirstName"&gt;First Name&lt;/th&gt;
          &lt;th id="LastName"&gt;Last Name&lt;/th&gt;
          &lt;th id="PhoneNumber"&gt;PhoneNumber&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  </code></pre>
  
  <p>And a clip of jQuery:</p>
  
  <pre><code>$("[id*=cbSelectAll1]").live("click", function () {
      var grid = $(this).closest("table");
      $("input:checkbox", grid).each(function () {
          if (chkHeader.is(":checked")) {
              $(this).attr("checked", "checked");
              $("td", $(this).closest("tr")).addClass("selected");
          } else {
              $(this).removeAttr("checked");
              $("td", $(this).closest("tr")).removeClass("selected");
          }
      });
  });
  </code></pre>
  
  <h2>Attacking a solution</h2>
  
  <p>So my first idea is to somehow lock down the check state at the end to no avail. Then I removed the data-bindings from the Select All for giggles and it still doesn't stick. So an unbound checkbox doesn't stay checked. I then moved on to try removing the checkbox from the table, but I can't figure out how to properly define the var grid above, as var grid = $('#checkableGrid') is not a valid definition or something as it fails silently.</p>
  
  <h2>Conclusion</h2>
  
  <p>I think I understand the problem but no idea how to put together a solution. Putting a checkbox in a sortable header is probably not the best way to go about things, but this is my burden I've inherited.</p>
  
  <h2>Update 1</h2>
  
  <p>While demoing some ideas, I've come across the problem of the select all checkbox works, but if at any time I sort the list through another column it unchecks some of them. Is there a way to set a column to not sort? I know this was possible using ASP Forms, but no idea how its done here. I think this would solve both problems.</p>
  
  <h2>Update 2</h2>
  
  <p>We've come up with a stopgap solution where it waits 100 cycles and then fixes the checkbox.</p>
  
  <pre><code>if (chkHeader.is(":checked")) {
      count = count - 1;
      setTimeout(function () {
          $('#cbSelectAll1').prop('checked', true);
      }, 100);
  } else {
      setTimeout(function () {
          $('#cbSelectAll1').prop('checked', false);
      }, 100);
  }
  </code></pre>
  
  <p>While not an ideal fix it is working.</p>