DotNetCurry Logo

Calculate Sum of ASP.NET CheckBox Values using jQuery

Posted by: Suprotim Agarwal , on 2/21/2011, in Category jQuery and ASP.NET
Views: 140253
Abstract: In this article, we will see how to add values of multiple ASP.NET Checkboxes using jQuery

In this article, we will see how to add values of multiple ASP.NET Checkboxes using jQuery. This example could be useful in scenarios where users are asked to select services they would like to avail and each service has a rate displayed – like in a webhosting service. Using jQuery, the total service cost should be automatically calculated, as the services are selected.

Note: If you are using jQuery with ASP.NET Controls, check out my EBook called 51 Recipes with jQuery and ASP.NET Controls.

Create an ASP.NET Website. Add the following markup

checkbox layout html

The layout should look similar to the following:

checkbox layout

Now add a reference to the latest jQuery script file and write the following code:

Sum checkbox jquery

Let us see what we just did:

When a checkbox is clicked, a variable ‘checked’ keeps track of the checked checkboxes.

checked variable

We then iterate the ‘checked’ collection using $().each() and add the text of the checkbox to a variable ‘total’.

calculate checkbox sum

Observe how we are accessing the value of a checkbox using $(this).next().text());

This is because the checkbox gets rendered like this:

checkbox render

To access the value, which is inside the label, we use next() which finds the very next sibling of each checkbox, which in our case is the label control. The parseFloat( ) parses strings into numbers.

The result is displayed in a paragraph (tot) using the toFixed() method, which rounds the result to the specified number of decimal places, in our case 2.

$('#tot').text("Your Total Amount Is: " + total.toFixed(2));

The output is shown here:

jquery checkbox demo

See a Live Demo. This demo has been tested in the following browsers: IE 7, IE 8, Firefox 3, Chrome 2, Safari 4.

The entire source code of this article can be downloaded over here

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on Google+
Further Reading - Articles You May Like!
Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigous Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
comments powered by Disqus
Comment posted by Hamid Raza Saleemi on Monday, February 28, 2011 7:29 PM
Dear Agarwal

I am here in Pakistan and your biggest fan . I have learned very much from your articles at dotnetcurry. I thank you for writing a great articles.

Best ,
Hamid
Comment posted by Suprotim Agarwal on Monday, February 28, 2011 9:47 PM
Hamid: I am glad the articles are helping you out :)
Comment posted by hjhhk on Tuesday, May 24, 2011 7:00 AM
khkhkh
Comment posted by came for asp.net on Sunday, May 29, 2011 4:44 AM
I came from www.asp.net , but this is a newbie article. Hope asp.nety improves  his quality
Comment posted by chaitanya on Tuesday, July 10, 2012 1:00 AM
hi this is chaitanya i want to create form using this following details.
how to create this form pls let me know.

CURB-65 and CRB-65 Severity Scores for Community Acquired Pneumonia

CURB-65
Confusion
Blood urea nitrogen > 19 mg/dL (7 mmol/L)
Respiratory rate ≥ 30 breaths/minute
"Systolic blood pressure < 90 mm Hg
                           or
Diastolic blood pressure ≤ 60 mm Hg"
Age ≥ 65 years
Calculate

Total Score

Clear



CRB-65
Confusion
Respiratory rate ≥ 30 breaths/minute
"Systolic blood pressure < 90 mm Hg
                           or
Diastolic blood pressure ≤ 60 mm Hg"
Age ≥ 65 years
Calculate

Total Score

Clear




Comment posted by rajani salvi on Wednesday, March 27, 2013 5:37 AM
hello sir, just now i see above codding this really helpful for me .