Checkbox checked add class

Question

I want to add a class to my label of my checkbox if it's checked.

Heres my html

<ul class="checkbox-list">
    <li><label class="rounded-all">Google <input class="checkbox-row" name="google" type="checkbox" value=""></label></li>
    <li><label class="rounded-all">Bing <input class="checkbox-row" name="bing" type="checkbox" value=""></label></li>
    <li><label class="rounded-all">Facebook <input class="checkbox-row" name="facebook" type="checkbox" value=""></label> </li> 
</ul>

I tried with this piece of code i got off here but doesn't seem too do the trick:

$(".checkbox-row").change(function() {
    $(this).closest('.checkbox-list li label').toggleClass("selected", this.checked);
});

Nick Craver · Accepted Answer · 2010-11-27 12:55:46Z

3

What you have works, you can test it here. What's likely happening is your CSS selector for your .selected class isn't specific enough, and so the properties just aren't getting applied.

For example, this may not work (if say there was a .checkbox-list li label style defined with another color):

.selected { color: red; }

While a more specific selector would:

.checkbox-list li label.selected { color: red; }

It's worth nothing though, your .closest() call can be simplified a bit using just label:

$(".checkbox-row").change(function() {
  $(this).closest('label').toggleClass("selected", this.checked);
});

edited Nov 27, 2010 at 12:55

answered Nov 27, 2010 at 12:42

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carpy Over a year ago

Thanks, works well. Like you say i just had to simplify the CSS class.

Shane IvoKid Reid · Accepted Answer · 2010-11-27 12:51:26Z

2

Try this:

$(".checkbox-row").change(function() {
    if($(this).is(':checked')) 
        $(this).parent().addClass('selected'); 
    else 
        $(this).parent().removeClass('selected');
});

answered Nov 27, 2010 at 12:51

Shane IvoKid Reid

3951 silver badge5 bronze badges

2 Comments

sje397 Over a year ago

This will add the class to the <li>, not the <label>.

Shane IvoKid Reid Over a year ago

No it won't - Direct parent of the input is the label.

Collectives™ on Stack Overflow

Checkbox checked add class

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related