if statement for three checkboxes javascript

Question

I have recently started javascript at college and am having a little trouble. I am not Including my code here as i dont want it written for me i just need some pointing in the right direction.

So, I have three checkboxes, each with a different value and i need to add together the values for the selected boxes. I understand how to do this but the way im doing it seems a bit long winded and im sure there is a better way.

Currently i have an if statement checking if box1 box2 and box3 are selected, if they are then they are added, else if box 1 and box2 are selected they are added, else if box1 and box2 are selected they are added and so on.

so basically im checking every combination of what boxes can be selected, one at a time. There must be a more efficient way of achieving this so any tips would be appreciated. Thanks in advance for any help.

Code would be helpful, though I think in this case it is not required. You can just use the values of selected elements if needed, no if required. — Duffmaster33
– Duffmaster33, Commented May 16, 2013 at 15:25
You're asking for a code review, nothing wrong with that. Try over here: codereview.stackexchange.com, since here we're a little more into solving code problems. — Mike Robinson
– Mike Robinson, Commented May 16, 2013 at 15:25

David Thomas · Accepted Answer · 2013-05-16 15:36:37Z

2

Assuming that your HTML resembles the following:

<input name="demo" type="checkbox" checked value="1" />
<input name="demo" type="checkbox" value="2" />
<input name="demo" type="checkbox" checked value="3" />

Then simply retrieve the elements of the relevant name, then iterate through the collection/nodeList and add the values to a declared 'total' variable:

var boxes = document.getElementsByName('demo'),
    total = 0;

for (var i = 0, len = boxes.length; i < len; i++){
    if (boxes[i].checked && boxes[i].type.toLowerCase() == 'checkbox') {
        total += parseInt(boxes[i].value, 10);
    }
}

console.log(total);

JS Fiddle demo.

the above code is, I think, cross browser compatible; but if you're looking for a more up-to-date technique that simplifies the for loop (to omit the if checks), then you can use document.querySelectorAll() as the selector technique:

var boxes = document.querySelectorAll('input[name="demo"][type="checkbox"]:checked'),
    total = 0;

for (var i = 0, len = boxes.length; i < len; i++){
    total += parseInt(boxes[i].value, 10);
}

console.log(total);

JS Fiddle demo.

References:

edited May 16, 2013 at 15:36

answered May 16, 2013 at 15:28

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Robinson Over a year ago

Not bad, would recommend querySelectorAll so that you don't have to use the type check. If he's in college he probably should learn the latest techniques.

David Thomas Over a year ago

Agreed, I was editing that in (after reviewing a suggested edit which slowed me down a moment or two).

Mark Schultheiss · Accepted Answer · 2013-05-16 16:12:21Z

Use a += and a simple ternary operator:

var total = 0;
total += document.getElementById('cb1').checked ? parseInt(document.getElementById('cb1').value, 10) : 0;
total += document.getElementById('cb2').checked ? parseInt(document.getElementById('cb2').value, 10) : 0;
total += document.getElementById('cb3').checked ? parseInt(document.getElementById('cb3').value, 10) : 0;
alert(total);

I should disclose that is the same as:

var total2 = 0;
if (document.getElementById('cb1').checked) total2 += parseInt(document.getElementById('cb1').value, 10);
if (document.getElementById('cb2').checked) total2 += parseInt(document.getElementById('cb2').value, 10);
if (document.getElementById('cb3').checked) total2 += parseInt(document.getElementById('cb3').value, 10);
alert(total2);

Examples HTML:

<input id="cb1" type="checkbox" value="341" checked />
<input id="cb2" type="checkbox" value="242" />
<input id="cb3" type="checkbox" value="345" checked  />

Collectives™ on Stack Overflow

if statement for three checkboxes javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related