how to access checkboxes and their values with getElementsByName

Question

Suppose I have the following section of a form:

<td>
 <p>
  <input type="checkbox" name="faddon" onchange="iaddon()" value="89.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="29.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="49.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="39.00" />
 </p>
</td>

<td>
 <p>
  <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
  <input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" />
 </p>
</td>

Every time the user selects or deselects a checkbox, I need the script to recalculate the variable addon to the total of all values of the boxes which are checked. This is the code I came up with first, but it does not appear to work for me:

function iaddon() {
 addon=0;
 av=document.getElementsByName("faddon");
 for (e=0;e<av.length;e++) {
  if (av[e].checked==true) {
   addon+=av[e];
   }
  }
 }

The script keeps returning NaN as the value of addon. At first, I wondered if javascript was reading the values as strings and not integers, but adding a (x)*1 around av[e] did not fix this. Then, I read a little more into getElementsByName and read about it possibly not being a typical array, but instead a nodeList.

I'm new to Javascript and can't figure out after hours of googling how to manipulate this nodeList. Any help is appreciated. I'd like to keep the 8 checkboxes in seperate table cells, so using something like childNodes wouldn't exactly work here, as far as I can tell. I also would like to steer clear of any jQuery at this point...I'm still learning and I want to make sure I understand how to do it in plain old javascript first. Thanks!

Austen

Possible duplicate of Get the value of checked checkbox? – Pyrogen

Answer 1

You need to use the value property and also parse it to a number. e.g:

function iaddon()
{
    addon = 0;
    for (e = 0; e < av.length; e++)
    {
        if (av[e].checked == true)
        {
            addon += parseInt(av[e].value, 10);
        }
    }
}

Bondsman

Answer 2

av[e] will return the element not the value of the element there for addon is not a number.

I believe you want to use av[e].value

also note that since you set addon=0 at the start of the function the value of addon will always only be the value of av[e].value during the function call.

function iaddon() {
 addon=0;
 av=document.getElementsByName("faddon");
 for (e=0;e<av.length;e++) {
  if (av[e].checked==true) {
   addon+=av[e].value;
   }
  }
 }

Indistinct

And for the love of god and all things holy please declare your variables with var. – Gilead

That seems to have solved it, guys! That's great! I did have to use the *1 after your help, though, for reference. It seems that after the user selected more than one checkbox it was stringing the values together. Also, for reference, should I use var to declare variables initially only or anytime I make a change to it? The var addon above was declared earlier in the script... – Austen

Answer 3

btw, obtrusive js

<input type="checkbox" name="faddon" onchange="iaddon()" value="89.00"/>

is very depressive to maintain your code, for both js and html code are written together.

Try to write unobtrusive js code like:

In html:

 <input id="index1" type="checkbox" name="faddon" value="89.00"/>

In js:

$('index1').click(function() {
  // Edit your function
});

Bustamante

The last example is not pure JavaScript, but an add-onn called JQuery. – Wingard

You should edit this to use pure JS to install the event handler for all respective elements instead of JQuery for just one element that is not even part of the question. – Hallsy