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.