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.

Seems to work fine for me? Tick the checkbox to change the parent's style. http://jsfiddle.net/b2uVV/ — mrtsherman, Jan 22 '13 at 21:20
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? — cimmanon, Jan 22 '13 at 21:20
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. — Kansha, Jan 22 '13 at 21:21
this should work, do you have your script live ? one more thing, I guess you should be using **toggleClass** instead of **addClass** — Abu Romaïssae, Jan 22 '13 at 21:34
@cimmanon yes that's what I want to do (gonna modify my question too). I'm not even sure how to catch the event. thanks — user12345, Jan 23 '13 at 14:40
@user1524149, as I understand, will this question remain unanswered? — Alexander, Jan 24 '13 at 11:35
looking at the answers I definitely wasn't specific enough.. (more edit..) — user12345, Jan 24 '13 at 18:28

MG_Bautista · Answer 1 · 2013-01-22T22:42:11.313

9

Try this...

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

Example

Greetings.

edited Jan 22 '13 at 22:42

answered Jan 22 '13 at 21:22

MG_Bautista

2,593
2
18
33

1

A shorter version: http://jsfiddle.net/LE46Q/1/ - EDIT: yours is actually more foolproof, since it checks the checked state. – zxqx Jan 22 '13 at 21:35
@ZakAngelle Thx nice version. – MG_Bautista Jan 22 '13 at 21:58
1

but if I dont have to apply on change event i.e. if its pre checked radio from database?? – user2906608 Jan 18 '17 at 10:56

score 3 · Answer 2 · answered Jan 22 '13 at 21:25

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.

score 0 · Answer 3 · answered Jan 22 '13 at 21:23

0

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

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

answered Jan 22 '13 at 21:23

tahdhaze09

2,220
1
21
36

score 0 · Answer 4 · answered Jan 22 '13 at 21:38

$(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.

if checkbox checked add class to parent element

4 Answers4

Linked

Related