SKFox

If you are going to copy/paste the page for use on your computer, please remove the reference to http://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 (using jQuery 1.2.6 min):

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

3 Responses to “jQuery Example: Calculating checkboxes for a value”

1. Jeremy says:

   December 1, 2008 at 6:46 pm

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

   Thanks, Jeremy
2. Lochlan says:

   May 12, 2009 at 5:06 pm

   Thanks, saved me a lot of time.
3. cryx says:

   February 18, 2010 at 8:05 am

   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: