Jquery changing css class on checkbox change

Question

I've put some jQuery together to change the highlighting on a container (default red, black on check) when a specific checkbox is checked. I feel this code could be simplified, but not sure how. Does anyone have any ideas please?

$("#container input:checkbox[id=cbTermsAndConditions]").change(function() {
   if ($(this).attr("checked")) {
     $('#container').addClass("containerblack");
     $('#container').removeClass("containerred");
   } else {
     $(this).parent().addClass("containerred");
     $(this).parent().removeClass("containerblack");
   }
});

Thanks

nicosantangelo · Accepted Answer · 2011-11-20 20:37:00Z

1

Little cleaner:

$("#container input:checkbox[id=cbTermsAndConditions]").click(function() {
   var $this = $(this);
   if ($this.attr("checked")) {
     $('#container').toggleClass("containerblack containerred");
   } else {
     $this.parent().toggleClass("containerred containerblack");
   }
});

Also, you could get the "checked" value with raw javascript, replacing the if statement with:

if(this.checked)

answered Nov 20, 2011 at 20:37

nicosantangelo

13.8k3 gold badges35 silver badges47 bronze badges

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

1 Comment

StuffandBlah Over a year ago

Thank you. I didn't know you could toggle more than one css class. I have also changed to using this.checked. Cheers.

Xhalent · Accepted Answer · 2011-11-20 20:32:36Z

1

Use the click event as the value of checkbox does not change and you can probably use toggle class if all you are doing is adding and removing classes.

answered Nov 20, 2011 at 20:32

Xhalent

3,96424 silver badges21 bronze badges

Collectives™ on Stack Overflow

Jquery changing css class on checkbox change

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related