title: if checkbox checked add class to parent element
body: <p>I have a table with checkboxes looking like this:</p>
  
  <pre><code>&lt;td class="table-col" &gt;
    &lt;div class="group-one" &gt;
      &lt;input type="checkbox"  /&gt;
    &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>What I want to do is when the checkbox is checked to apply a "selected" class to "table-col". </p>
  
  <pre><code>if ($('.table-col').find(':checked')) {
      $(this).parent().parent().addClass('selected');
  }
  </code></pre>
  
  <p>I looked at many post with a similar solution like above but it doesn't seem work for me.  I'm not sure why but <em>this</em> is pointing to HTMLDocument not the element. </p>
  
  <p>(edit) On this page there will be marked checkboxes, those which I want to apply "selected".  On comments @cimmanon mentioned event handling.  I'll need to look this up. Thanks for the answers too!</p>
  
  <p>(edit)</p>
  
  <pre><code>&lt;td class="table-col"&gt;
  &lt;div class="group-one"&gt;
      &lt;input type="checkbox" checked="checked"/&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>So after the pageloads there will be boxes marked (i think they will always contain <em>checked="checked"</em> -- not sure) checkboxes.  These are the ones that need a new style.  There is no need for the interaction of clicking them and applying a style but very cool nonetheless.</p>