Toggle parent class of checkbox on check action using jquery

Question

I am trying to make a form with multiple checkboxes. I want to highlight the checkboxes with their content to indicate to the user of the selection
I am using the following layout for my form

HTML

<form>
<div class=labl>
<input type=checkbox id='alpha' />
<label for='alpha'>Checkbox1</label>
</div>

CSS

.labl{

height:50px;
}
.labl:hover{
background:#ccc;
}
.chked {
background: #4285f4;
height:50px;
}

jQuery

<script>

$("input[type=checkbox]").change(function() {
    $(this).parent().toggleClass("chked");
});

</script>

Now when alpha is checked it should change the class of div from labl to chked
but it is not

Answer 1

You need a DOM ready handler like this $(function(){...});

$(function () {
    $("input[type=checkbox]").change(function () {
        $(this).parent().toggleClass("chked");
    });
});

Documentation

Update

It appears that the checkbox is dynamically added to the DOM so you must use event delegation like this

    $(document).on("change","input[type=checkbox]",function () {
        $(this).parent().toggleClass("chked");
    });

Answer 2

You can pass both the class names to the toggleClass() method, so that only one of the will be applied at a time

jQuery(function(){
    $("input[type=checkbox]").change(function() {
        $(this).parent().toggleClass("labl chked");
    });
})

Demo: Fiddle

Answer 3

just change your script to

$("input[type=checkbox]").change(function() {
    $(this).parents('.labl').toggleClass("chked");
}); 

And your HTML to

<form>
<div class='labl'>
    <input type='checkbox' id='alpha'></input>
<label for='alpha'>Checkbox1</label>
</div>

Here is the updated fiddle

http://jsfiddle.net/k242J/

Answer 4

toggleClass functionality is to check the class, if not there it will add, else remove class thats it. its not to change from one class to another.

css

.chked {
    background: #4285f4;
}

js

$("input[type=checkbox]").change(function() {
     $(this).parent().toggleClass("chked");
 });