HTML checking for multiple checkbox

Question

I'm writing a piece of code as an exercice in HTML that allows the user to tick boxes (the code below is simplified, from 8 checkboxes to 2) and the text totalPrice should show the price of the item selected.

<script type='text/javascript'>
function f(){
  if(document.form1.nano1Gb.checked == true)
    document.form1.totalPrice.value = document.form1.priceNano1Gb.value 
  if(document.form1.nano4Gb.checked == true)
    document.form1.totalPrice.value = document.form1.priceNano4Gb.value 
  if(document.form1.nano1Gb.checked == true && document.form1.nano4Gb.checked == true)
    document.form1.totalPrice.value = parseInt(document.form1.priceNano1Gb.value) + parseInt(document.form1.priceNano4Gb.value)
}
</script>
<body>
<form name='form1'>
<p>
<input type='checkbox' name='nano1Gb' onclick=f(); />
<input type='text' value='Nano 1GB'>
<input type='text' name='priceNano1Gb' value='90'</p>

<p>
<input type='checkbox' name='nano4Gb' onclick=f(); />
<input type='text' value='Nano 4 GBb'>
<input type='text' name='priceNano4Gb' value='155'</p>

<p><input type='text' name="totalPrice" placeholder="Total Price"></p>

This works with two elements, but with 8 elements, it seems highly inefficient for me to great hundreds of conditions checking every single box and totaling what else has been checked. How can I code this better?

mplungjan · Accepted Answer · 2016-11-30 08:35:11Z

Give them a class.
Use document.querySelectorAll(".yourclassname:checked")
loop over result
give total an ID and set the value

window.onload = function() {
  var checks = document.querySelectorAll(".chk");
  for (var i = 0; i < checks.length; i++) {
    checks[i].onclick = function() {
      total();
    }
  }
}

function getNext(next) {
  do next = next.nextSibling;
  while (next && next.nodeType !== 1);
  return next;
}

function total() {
  var total = 0;
  var checks = document.querySelectorAll(".chk:checked");
  for (var i = 0; i < checks.length; i++) {
    var nameField = getNext(checks[i]);
    var priceField = getNext(nameField);
    total += parseInt(priceField.value, 10); // or parsefloat(priceField.value) if decimal
  }
  document.querySelector("#total").value = total; // or total.toFixed(2) if decimal
}

<form name='form1'>
  <p>
    <input class="chk" type='checkbox' name='nano1Gb' />
    <input type='text' value='Nano 1GB'>
    <input type='text' name='priceNano1Gb' value='90' />
  </p>

  <p>
    <input class="chk" type='checkbox' name='nano4Gb' />
    <input type='text' value='Nano 4 GBb'>
    <input type='text' name='priceNano4Gb' value='155' />
  </p>

  <p>
    <input id="total" type='text' name="totalPrice" placeholder="Total Price">
  </p>
</form>

Hue · Accepted Answer · 2016-11-30 10:58:44Z

1

Give the checkbox, value and total input elements a class.
Use querySelector/querySelectorAll to select these elements.
Using for loop traverse through each checkbox adding their value to the total if checked.
In this example I have used 5 checkboxes.

<script type='text/javascript'>
function f(){
      var val = document.querySelectorAll(".value");
      var check = document.querySelectorAll(".checkbox");
      var allSum = document.getElementByClassName(".total");
      var total = 0;
      for (var i=0; i<check.length; i++) {
        if(check[i].checked === true) {
            total += parseInt(val[i].value);
            allSum.value = total;          
          }
      }
}
</script>
</head>
<body>
<form name='form1'>
<p>
<input class="checkbox" type='checkbox' name='nano1Gb' onclick=f(); />
<input type='text' value='Nano 1GB'>
<input class="value" type='text' name='priceNano1Gb' value='90'</p>

<p>
<input class="checkbox" type='checkbox' name='nano2Gb' onclick=f(); />
<input type='text' value='Nano 2 GB'>
<input class="value" type='text' name='priceNano2Gb' value='115'</p>

<p>
<input class="checkbox" type='checkbox' name='nano3Gb' onclick=f(); />
<input type='text' value='Nano 3 GB'>
<input class="value" type='text' name='priceNano3Gb' value='130'</p>


<p>
<input class="checkbox" type='checkbox' name='nano4Gb' onclick=f(); />
<input type='text' value='Nano 4 GB'>
<input class="value" type='text' name='priceNano4Gb' value='155'</p>

<p>
<input class="checkbox" type='checkbox' name='nano5Gb' onclick=f(); />
<input type='text' value='Nano 5 GB'>
<input class="value" type='text' name='priceNano5Gb' value='170'</p>

<p><input class="total" type='text' name="totalPrice" placeholder="Total Price"></p>
</body>
</html>

edited Nov 30, 2016 at 10:58

answered Nov 29, 2016 at 15:16

Hue

3032 silver badges9 bronze badges

3 Comments

mplungjan Over a year ago

This answer is incorrect since IDs need to be unique. Please see my answer for a solution using best practices.

Hue Over a year ago

Thank you for the correction, I have now edited ids to class.

mplungjan Over a year ago

But why bother? Nothing added to the existing answer

Collectives™ on Stack Overflow

HTML checking for multiple checkbox

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related