Change background color of div when checkbox is clicked

checkbox, css, forms, jquery

Solution

jQuery:

$("input[type='checkbox']").change(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass("redBackground"); 
    }else{
        $(this).parent().removeClass("redBackground");  
    }
});

CSS:

.redBackground{
    background-color: red;  
}

I'd recommend using Add/Remove class, as opposed to changing the CSS of the parent `div` directly.

DEMO: http://jsfiddle.net/uJcB7/

Problem

I have a form with several checkboxes, like this: ``` <div><input type='checkbox' name='groupid' value='1'>1</div> <div><input type='checkbox' name='groupid' value='2'>2</div> <div><input type='checkbox' name='groupid' value='3'>3</div> ``` What I'm trying to do is when the checkbox is checked, change the background color of the div, and when it's unchecked, remove the background color. How can I do this using jquery? Thanks

Original source