CODEWITHSUNDEEP
jqueryinput
Joshc
Joshc

Reputation: 3853

jquery check and change parent node background colour when a input checkbox is checked or not checked

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/

Upvotes: 0

Views: 620

Answers (2)

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

Try the below code

$inputCB.bind('change', function (){

$(this).parent().toggleClass('box-checked',this.checked);
});

CSS needs !important in fiddle since select-area applys "black" background which gets priority

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

Upvotes: 1

adeneo
adeneo

Reputation: 318182

$(".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;
}

Upvotes: 1

Related Questions