Question

http://jsfiddle.net/2Wpfw/3/

I’m not sure if my question title is the best description.

I’m after some jquery help please with some way of checking if a input=”checkbox” is checked or not, and then to add a class or remove depending on the checkbox state.

Anyway my form markup looks like this…

<form>

    <ul class="select-wrapper">

        <li class="select-area">

            <input type="checkbox" name="colour1" id="colour1" value="black">

            <label for="colour1">Number 1</label>

        </li>

    </ul>

</form> 

See this fiddle with my extremly poor attempt. http://jsfiddle.net/2Wpfw/3/

As you can see when you hover over the <li> they go red, but dont stay red if a input is already checked or if the input is selected live.

I would like them to stay red when the input is selected live on the page, and also go back to black if it is unchecked. The form is ajax based so if there is an error, I would like the input li’s that are checked to appear in red (I will be doing this by running the function again after form is submitted).

I am making these appear in red my adding and removing the .box-checked class.

Can any one see a possible work arround as I’m quite lost as in where to start.

Any help would be hugely appreciated. Thanks

http://jsfiddle.net/2Wpfw/3/

Answer 1

$(".select-area input[type='checkbox']").on('change', function() {
    $(this).closest('.select-area').toggleClass('box-checked', this.checked);
});
​

FIDDLE

You also need to be more specific in your CSS, as right now the .box-checked styles are not overriding the original styles, something like :

.select-area.box-checked {
    background: red;
}