使用jQuery将toggleClass添加到复选框

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 + "%");
    });

});

Answer 1

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

Answer 2

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.

Answer 3

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:

• Attribute-equals ( [attribute=value] ) selector .
• change() .
• on() .
• toggleClass() ;