Check checkbox = Toggle class in div (with many same divs)

Question

I have a list of divs (#div1, #div2, #div3 etc). Each one of those divs contain different pictures and texture. The divs share the same layout class and they all contain a checkbox (all checkboxes also have one class).

I want the individual div to toggle class when the checkbox inside it are checked.

How to manage this without all divs toggle class when click a checkbox in one div?

Thanks.

Answer 1

http://jsbin.com/exasow/1/edit

$(':checkbox').click(function(){
   $(this).closest('div[id^=div]').toggleClass( 'superclass' );
});

you can use both click or change function.

http://api.jquery.com/closest/ will allow you to have your checkbox inside other elements, it will always search up the DOM tree for the desired parent:

div[id^=div] means DIV element which ID starts with the word "div" and will work for all your div1, div2, div*** selectors.

Answer 2

Give a Id to the checkboxes and on basis of that toggle the parent div class

or, listen to the event and toggle the class of the parent div

Something like this,

$(event.currentTarget).parent().toggle('className');

Answer 3

Try this. DEMO.

Use the .click() for the checkbox and then get its parent div by using .parent() then call .toggleClass('classforparentdiv').

UPDATE

Here.

Hope it helps.