How to count the number of checkboxes and add to the price

Question

hi everyone,

I'm try to count the number of checked checkboxes, if two are checked the price of the item in the hidden field is £3.00 and for any additional check boxes the price should be added by 1,

I don't seem to find a solution, any help would be appriciated. all the checkboxes have the Id="veg"; and hidden field has Id="my_item-price"

        function SetHiddenFieldValue()
        {
            var itemPrice = 3;
         var totalChecked = 0;
         var veg = document.getElementsById("veg");
         for(j=0; j < veg.length;j ++)
         {
        if(veg[j].checked)
        {
       totalChecked += 1;
         }
         }
  return totalChecked

    if (totalChecked > 2) {
  totalChecked = totalChecked -2;
  totalChecked = totalChecked * 1;
  itemPrice = itemPrice + totalChecked;

 }

         document.getElementById('my-item-price').value = itemPrice;
}

Answer 1

If you return a value with return, the function call is quit and any following code is not being executed. So try to put the return at the end of your function.

Additionally document.getElementById does always return just one element as the ID must be unique in a document. So you need to collect your checkboxes with an other method, perhaps getElementsByName if your checkboxes all have the same name.

Answer 2

You can't give them all the same ID - IDs must be unique.

Apart from that you have the right kind of idea. Not sure what that return totalChecked is doing in the middle of the function though.

Answer 3

If you have id 'veg' on all the checkboxes, you will run into problems, since an ID is expected to be unique. You could try to put the checkboxes into a parent div, then walk over them using document.getElementsByTagName("option") and counting the values.

Answer 4

getElementById will always only return one element, as that is how id is specified to work. it is malpractice to set the same id to several fields. Instead, consider wrapping them in a container:

<div id="myCheckboxes"> ... </div>

and then get them all using

document.getElementById('myCheckboxes').getElementsByTagName('input');

Answer 5

'id' is a unique identifier -- it can and should only be used for one element. You should be using 'class', instead. Try this:

First, include this JS in your code: GetElementsByClassName

And then do this:

function SetHiddenFieldValue() {
    var itemPrice = 3;
    var totalChecked = 0;
    var veg = document.getElementsByClassName("veg", "input");

    for(j=0; j < veg.length;j++) {
        if(veg[j].checked) {
            totalChecked += 1;
        }
    }

    if (totalChecked > 2) {
        totalChecked = totalChecked -2;
        totalChecked = totalChecked * 1;
        itemPrice = itemPrice + totalChecked;
    }

    document.getElementById('my-item-price').value = itemPrice;

    return totalChecked;
}