Add toggleClass to a Checkbox with jQuery

Question

How can I apply toggleClass() to an input="checkbox" when it has been checked? I'm trying to add the class "calcButtonOn" when checked:

jQuery(function() {
    var total = 0;
    jQuery("input").click(function() {
        total = 0;
        jQuery("input:checked").not('input[value="reset"]').each(function() {
            total += parseFloat(jQuery(this).val());
        });
        jQuery("#Totalcost").html("Save up to " + total + "%");
    });

});

Listen to change event on your checkbox, then check its state with .prop('checked') — Robin Leboeuf
– Robin Leboeuf, Commented Mar 6, 2015 at 15:28
Do you also want to remove the class when the checkbox is unchecked, or should the class remain once it's added? — David Thomas
– David Thomas, Commented Mar 6, 2015 at 15:40

Anonymoose · Accepted Answer · 2015-03-06 16:20:30Z

2

Select all the checkboxes with JQuery and add an event handler on change event:

jQuery("input[type=checkbox]").change(function(){
    jQuery(this).toggleClass("calcButtonOn", this.checked);
});

Example JSFiddle

edited Mar 6, 2015 at 16:20

answered Mar 6, 2015 at 15:30

Anonymoose

2,5017 gold badges40 silver badges71 bronze badges

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

1 Comment

Bill Criswell Over a year ago

This can get out of sync very easily. If the page is loaded with it checked then things would be reversed. You definitely need to check to see if it's checked in the change function before toggling the class.

David Thomas · Accepted Answer · 2015-03-06 15:53:51Z

1

I'd suggest, on the assumption that you want to have the class present when the element is checked, and removed when the element is subsequently unchecked:

jQuery('input[type=checkbox]').on('change', function () {
    $(this).toggleClass('active', this.checked);
});

jQuery('input[type=checkbox]').on('change', function () {
  $(this).toggleClass('active', this.checked);
});

input {
  display: block;
  padding: 0.5em;
  margin: 0 0 1em 0;
  box-shadow: none;
}

input.active {
  box-shadow: 0 0 1em 0.25em #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

Should any of your check-boxes be checked on page-load (via the checked attribute, for example) then it's worth further chaining the change() method (without a function callback) in order to fire the event:

jQuery('input[type=checkbox]').on('change', function () {
    $(this).toggleClass('active', this.checked);
}).change();

jQuery('input[type=checkbox]').on('change', function () {
  $(this).toggleClass('active', this.checked);
}).change();

input {
  display: block;
  padding: 0.5em;
  margin: 0 0 1em 0;
  box-shadow: none;
}

input.active {
  box-shadow: 0 0 1em 0.25em #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="checkbox" />

References:

edited Mar 6, 2015 at 15:53

answered Mar 6, 2015 at 15:41

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

Bill Criswell Over a year ago

Definitely the clearest example in my opinion. I think you should add .trigger('change') after the .on so if the page is loaded with things checked it won't seem broken.

David Thomas Over a year ago

@Bill: that's an idea, certainly, but given the ambiguous and vague nature of the question I'm not sure it's a necessity. I'll edit that in, though, for completion :)

Pratik Joshi · Accepted Answer · 2015-03-06 16:05:11Z

1

Use :

  $(".Your_Checkbox_Class")each(function(){
     if ($(this).is(':checked') ){
        $(this).toggleClass("Your_New_Class");
    } 
  });

Explanation : Loop thru all Checkboxes (hope you have given them Class as i gave above ).And then check if its checked , if yes toggle the class.

Edit

Well your question is not 100% clear. But if you want event on click of only one checkbox and toggle only that checkbox , then use

  $(".Your_Checkbox_Class").click(function(){
     var id = $(this).attr("id");
        $("#"+id).toggleClass("Your_New_Class");
  })

Explanation : If checkbox gets checked , then toggle class. I assume you have proper classes on DOM load . Like if after Loading DOM , if a checkbox is already ticked (Came from server side), it will already have class for checked_element already.

edited Mar 6, 2015 at 16:05

answered Mar 6, 2015 at 15:30

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

3 Comments

Anonymoose Over a year ago

This will only toggle once but not when the state of the checkbox changes. Although it is not completely clear from the question if he wants this

Pratik Joshi Over a year ago

Well I was not sure from OP's Question , there are 100 checkboxes or 1. I am editing.

Bill Criswell Over a year ago

You shouldn't use $.each($('.selector'), function() { }); Doing $('.selector').each(function () { }); is definitely preferred since you're working with a jQuery collection.

Collectives™ on Stack Overflow

Add toggleClass to a Checkbox with jQuery

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related