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.

Headspring

Seems to work fine for me? Tick the checkbox to change the parent's style. jsfiddle.net/b2uVV – Bendick

Is this class supposed to be applying when an event happens (the box is checked)? If so, do you have an event handler to catch the action? – Bugloss

instead of two parent calls you can do .closest('.table-col') but your code is fine I think. Add console.log statements to see what is running and debug from there. – Ruche

this should work, do you have your script live ? one more thing, I guess you should be using toggleClass instead of addClass – Unknow

@Bugloss yes that's what I want to do (gonna modify my question too). I'm not even sure how to catch the event. thanks – Headspring

@user1524149, as I understand, will this question remain unanswered? – Yuonneyup

looking at the answers I definitely wasn't specific enough.. (more edit..) – Headspring

Answer 1

Try this...

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

Example

Greetings.

Nipping

A shorter version: jsfiddle.net/LE46Q/1 - EDIT: yours is actually more foolproof, since it checks the checked state. – Juliannejuliano

@ZakAngelle Thx nice version. – Nipping

but if I dont have to apply on change event i.e. if its pre checked radio from database?? – Bendix

Answer 2

You can use .change() to bind to the change event; then, use .closest() and .toggleClass() to add or remove the selected classname from the grandparent element.

$("input:checkbox").change(function(){
  $(this).closest(".table-col").toggleClass('selected', this.checked);
});

See it here.

Yuonneyup

Answer 3

HTML:

<div class="parent">
   <div class="child1">
       <input type="checkbox"/>
   </div>
   <div class="child2">TARGET</div>
<div>

CSS:

.parent:has(input:checked)
{
  //CSS FOR .parent, WHEN CHECKBOX CHECKED
}
.parent:has(input:checked) .child2
{
  //CSS FOR TARGET, WHEN CHECKBOX CHECKED
}

Punkie

Answer 4

Give your checkbox a name so jQuery can hook to it:

$('input[name=foo]').is(':checked')

Asgard

Answer 5

$(this) will only refer to your checkbox (so that you can go up to it's grandparent as per your code) when you're in an event handler invoked by having assigned it to the checkbox element as @cimmanon hinted at.

So if you assigned the .change() handler to your checkbox, $(this) will refer to your checkbox. You can actually do this in one line because you probably want to toggle the "selected" class on or off:

    $(":checkbox").change(function () {
    $(this).parent().parent().toggleClass('selected');
         });

Otherwise $(this) refers to the control that raised the event for example if you are executing this code in response to a button click handler, $(this) will refer to the button.

Spinks