if checkbox checked add class to parent element

Question

I have a table with checkboxes looking like this:

<td class="table-col" >
  <div class="group-one" >
    <input type="checkbox"  />
  </div>
</td>

What I want to do is when the checkbox is checked to apply a "selected" class to "table-col".

if ($('.table-col').find(':checked')) {
    $(this).parent().parent().addClass('selected');
}

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 this is pointing to HTMLDocument not the element.

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

(edit)

<td class="table-col">
<div class="group-one">
    <input type="checkbox" checked="checked"/>
</div>
</td>

So after the pageloads there will be boxes marked (i think they will always contain checked="checked" -- 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.

Answer 1

Try this...

$(":checkbox").on('click', function(){
     $(this).parent().toggleClass("checked");
});

Example

Greetings.