jQuery Example: Calculating checkboxes for a value

If you are going to copy/paste the page for use on your computer, please remove the reference to https://skfox.com/mint and the google analytics script at the bottom. Otherwise, I get a bunch of clicks/statistics on my server that corresponds to your testing.

Alternatively, you can download all of the jQuery examples in a zip file.

I helped another developer today that had a jQuery question. He wanted the user to be able to ‘check’ a series of HTML check boxes that would then show the total value for each of the checked items.

I whipped something up really quick, and tried it in Firefox 2. Worked great. Then I tried it in Internet Explorer 6/7. Ugh, only calculates once the checkbox loses focus. I then changed the event binding in jQuery from change to click. Now it works just fine cross browser in IE6/7, Opera 9.5, Safari 3, and FF2/3.

Here is the code:

If you would like to see it in action, check out the demo.

5 thoughts on “jQuery Example: Calculating checkboxes for a value

  1. Thanks a lot! I’ve spent hours looking for this and I honestly thought it would be more difficult.

    Thanks, Jeremy

  2. Hi, I tried this script and it works but not quite exaclty. In my textfield where the input goes just says “NaN” when I press on a checkbox with a integer value. :S

    This is the script:

  3. Thanks, this blog helped me somewhat in narrowing down some issues with the latest version, Why do they often leave out vital documentation when they release a new version? It may be trivial to them but not for us! I’m sure we’re not alone either.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.