[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Add / Subtract checkboxes in an array. Javascript

Posted on 2007-07-31
Medium Priority
Last Modified: 2008-02-01

i want to add / subtract the checkboxes of a table so the amount is totaled at the bottom of the page.

I also need to be able to send the checked boxes as an array so the name of the input has to be something like  'choice[]'

i have found a scritp here that almost works:

<script type="text/javascript">
      function checkTotal() {
            document.listForm.total.value = '';
            var sum = 0;
            for (i=0;i<document.listForm.choice.length;i++) {
              if (document.listForm.choice[i].checked) {
                    sum = sum + parseInt(document.listForm.choice[i].value);
            document.listForm.total.value = sum;

<form name="listForm">
<input type="checkbox" name="choice" value="2" onchange="checkTotal()"/>2<br/>
<input type="checkbox" name="choice" value="5" onchange="checkTotal()"/>5<br/>
<input type="checkbox" name="choice" value="10" onchange="checkTotal()"/>10<br/>
<input type="checkbox" name="choice" value="20" onchange="checkTotal()"/>20<br/>
Total: <input type="text" size="2" name="total" value="0"/>

but this script does not allow me to change the name from choice to choice[ ].

if the name of the input can become choice[] and the totals still calculate then i have what  i need.


Question by:ussher
  • 2
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19599196
LVL 75

Accepted Solution

Michel Plungjan earned 1000 total points
ID: 19599208
Here is a cleaner version

<script type="text/javascript">
function checkTotal(theForm) {
  var sum = 0;
  var chk = theForm.elements["choice[]"]
  for (var i=0;i<chk.length;i++) {
    if (chk[i].checked) {
      sum += parseInt(chk[i].value);
  theForm.total.value = sum;

<form name="listForm">
<input type="checkbox" name="choice[]" value="2" onchange="checkTotal(this.form)"/>2<br/>
<input type="checkbox" name="choice[]" value="5" onchange="checkTotal(this.form)"/>5<br/>
<input type="checkbox" name="choice[]" value="10" onchange="checkTotal(this.form)"/>10<br/>
<input type="checkbox" name="choice[]" value="20" onchange="checkTotal(this.form)"/>20<br/>
Total: <input type="text" size="2" name="total" value="0"/>

Author Comment

ID: 19605281


Thanks very much

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question