Calculate Sum of ASP.NET CheckBox Values using jQuery

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

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

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 The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!
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 ,
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
Comment posted by came for on Sunday, May 29, 2011 4:44 AM
I came from , 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

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

Total Score


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

Total Score


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 .