I want to add a class when the checkbox is checked on the div element it belongs..
This is the link to my current code: [http://jsfiddle.net/WH6bz/2/]
What seems to be the problem?
The problem is that you were using Mootools.
Try this: http://jsfiddle.net/WH6bz/3/
Also, the else condition should be removeClass()
.
$('div.thumb > input:checkbox').change(function () {
if ($(this).is(":checked")) {
$(this).closest("div.thumb").addClass('highlight');
}
else {
$(this).closest("div.thumb").removeClass('highlight');
};
});
The problem is that you're not loading jQuery in your fiddle... Try this shorter code in any case. By using toggleClass
with the switch
param you get rid of the if..else
statement and all that code WETness.
$('div.thumb input[type=checkbox]').change(function() {
$(this).closest('div.thumb').toggleClass('highlight', $(this).is(':checked'));
});
The problem is that you have selected Mootools instead of jQuery as the jsFiddle framework :D.
There is nothing wrong with your code. You have to select jQuery from the Framework drop down list at the left sidebar of jsFiddle.
Demo: http://jsfiddle.net/UvVvH/
$('div.thumb > input:checkbox').change(function () {
if ($(this).is(":checked")) {
$(this).closest("div.thumb").addClass('highlight');
}
else {
$(this).closest("div.thumb").addClass('highlight');
};
});
change the frame work moo tools. select jquery and run the code
$('div.thumb > input:checkbox').change(function () {
if ($(this).is(":checked")) {
$(this).closest("div.thumb").addClass('highlight');
}
else {
$(this).closest("div.thumb").removeClass('highlight');
};
});