title: jQuery checkbox select all and change background color on select
body: <p>I have a table with checkboxes in the first column, and a "select all" checkbox in the header. When I check a checkbox, I need the row color to change. </p>
  
  <pre class="lang-js prettyprint-override"><code>var $tbl = $('#tbl');
  var $bodychk = $tbl.find('tbody input:checkbox');
  
  $(function () {
      $bodychk.on('change', function () {
          $(this).closest('tr').toggleClass('hilite');
      });
  
      $tbl.find('thead input:checkbox').change(function () {
          var c = this.checked;
          $bodychk.prop('checked', c);        
      });
  });
  </code></pre>
  
  <ol>
  <li>If you select the individual boxes, the row changes color</li>
  <li>If you click the "select all" box, it'll toggle the other checkboxes.</li>
  </ol>
  
  <p>But I can't get both working together. <strong><a href="http://jsfiddle.net/hb6cx0tn/6/" rel="nofollow noreferrer">See here</a></strong></p>
  
  <p>These questions come close but don't fully answer what might be wrong...</p>
  
  <p><a href="https://stackoverflow.com/questions/7120636/change-class-of-tr-if-checkbox-is-selected">Change class of tr if checkbox is selected</a></p>
  
  <p><a href="https://stackoverflow.com/questions/15879608/jquery-select-all-checkbox">Jquery &quot;select all&quot; checkbox</a></p>