I'm trying to display a total value of all the checkboxes that are checked I've tried only this solution

my description is quite precise and self-explanatory

Javascript function

How to display the total of all checkboxes that are checked. Trying to display the total price by calculating all the checkboxes that are checked.

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>On the go</title>
  <link rel="stylesheet" type="text/css" href="menu.scss">
  <script>
    function calcAndShowTotal() { **
      * // declaring the name and total***
      var hotbeverage = document.querySelectorAll('input[name="hotbeverage"]');
      var total = 0; **
      * // checking if any checkboxes have been selected***
      for (i = 0; i < hotbeverage.length; i++) { **
        * // if the checkbox is selected add the value to total***
        if (hotbeverage[i].checked) {
          total = total + hotbeverage[i].value;
        }

        document.getElementById("amount").value = "You order total is R" + total;
      }
  </script>
  ***// adding checkboxes***
</head>

<body>
  <h1>Hot Beverages</h1>
  <div id="pricelist">
    <input type="checkbox" name="hotbeverage" value="item1" price="25.00">Americano <b>R25.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item2" price="2">Caffe Latte <b>R30.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item3" price="3">Cappuccino <b>R15.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item4" price="4">Hot Chocolate<b>R20.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item5" price="5">Chai Latte <b>R20.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item6" price="6">ButterScotch latte<b>R28.00</b><br>
    <input type="text" id="amount" value="0" />
  </div>

</body>

</html>

I want the text field to populate with the value

3 Answers

0
Zakaria Acharki On

The main problem comes when you're trying to calculate the value of the input when the real value is in the price attribute, so you can change .value by .getAttribute('price').

NOTE: It's always better to use data-* attribute when you need a custom attribute, so data-price will be more efficient, then you can get the value like :

parseFloat( hotbeverage[i].dataset.price );

document.querySelector('#calc').addEventListener('click', calcAndShowTotal);

function calcAndShowTotal() {
  var hotbeverage = document.querySelectorAll('input[name="hotbeverage"]');
  var total = 0;

  for (i = 0; i < hotbeverage.length; i++) {
    if (hotbeverage[i].checked) {
      total += parseFloat( hotbeverage[i].getAttribute('price') );
    }
  }

  document.getElementById("amount").value = "You order total is R " + total;
}
<h1>Hot Beverages</h1>
<div id="pricelist">
  <input type="checkbox" name="hotbeverage" value="item1" price="25.00">Americano <b>R25.00</b><br>
  <input type="checkbox" name="hotbeverage" value="item2" price="2">Caffe Latte <b>R30.00</b><br>
  <input type="checkbox" name="hotbeverage" value="item3" price="3">Cappuccino <b>R15.00</b><br>
  <input type="checkbox" name="hotbeverage" value="item4" price="4">Hot Chocolate<b>R20.00</b><br>
  <input type="checkbox" name="hotbeverage" value="item5" price="5">Chai Latte <b>R20.00</b><br>
  <input type="checkbox" name="hotbeverage" value="item6" price="6">ButterScotch latte<b>R28.00</b><br>
  <input type="text" id="amount" value="0" />
</div>

<button id="calc">Calculate</button>

0
k.swapnil On

To display the total of all checkboxes that are checked and display the total price by calculating all the checkboxes that are checked you can use following code: html tag:

test 1
test 2
test 3
test 4

javaScript code:

jQuery(document).ready(function($) {
    var sum = 0;
    $('#pakker :checkbox').click(function() {
        sum = 0;
        $('#pakker :checkbox:checked').each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

        $('#sum').html(sum);

    });

});

Please also refer following link for more details. http://jsfiddle.net/vaKWs/6/

0
Maheer Ali On

Following are mistakes in the code:

  • You are not calling the function calcAndShowTotal. You should attach event to all the checkboxes to see change.
  • You are adding value but you should add its price. Use getAttribute to checkbox's price.
  • In your loop you are declaring global variable i. Use let before it.

let hotbeverage = document.querySelectorAll('input[name="hotbeverage"]');

hotbeverage.forEach(x => {
  x.addEventListener('change',calcAndShowTotal)
})


function calcAndShowTotal() { 
       // declaring the name and total***
      var total = 0; 
       // checking if any checkboxes have been selected***
      for (let i = 0; i < hotbeverage.length; i++) { 
         // if the checkbox is selected add the value to total***
      if (hotbeverage[i].checked) {
          total = total + (+hotbeverage[i].getAttribute('price'))
        }

     document.getElementById("amount").value = "You order total is R" + total;
   }
}
  <h1>Hot Beverages</h1>
  <div id="pricelist">
    <input type="checkbox" name="hotbeverage" value="item1" price="25.00">Americano <b>R25.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item2" price="2">Caffe Latte <b>R30.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item3" price="3">Cappuccino <b>R15.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item4" price="4">Hot Chocolate<b>R20.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item5" price="5">Chai Latte <b>R20.00</b><br>
    <input type="checkbox" name="hotbeverage" value="item6" price="6">ButterScotch latte<b>R28.00</b><br>
    <input type="text" id="amount" value="0" />
  </div>