Calculate Sum of ASP.NET CheckBox Values using jQuery

Posted by: Suprotim Agarwal , on 2/21/2011, in Category jQuery and ASP.NET
Views: 121303
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

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
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 .

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel