Add / Subtract checkboxes in an array. Javascript

Posted on 2007-07-31
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() {
   = '';
            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);
   = 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
    LVL 75

    Expert Comment

    by:Michel Plungjan
    LVL 75

    Accepted Solution

    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);
      } = 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"/>
    LVL 1

    Author Comment



    Thanks very much

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    "That which we persist in doing becomes easier, not that the task itself has become easier, but that our ability to perform it has improved." Ralph Waldo Emerson Introduction: One of the wonderful things about the web is that it makes it s…
    In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
    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…

    746 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

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now