CODEWITHSUNDEEP
javascript
amir
amir

Reputation:

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

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;
}

Upvotes: 0

Views: 1296

Answers (5)

Tyson
Tyson

Reputation: 6244

'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;
}

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129812

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');

Upvotes: 0

ylebre
ylebre

Reputation: 3130

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.

Upvotes: 0

Greg
Greg

Reputation: 321786

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.

Upvotes: 1

Gumbo
Gumbo

Reputation: 655609

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.

Upvotes: 0

Related Questions