title: How to add a display a total value of the checkbox that are checked
body: <p><strong><em>I'm trying to display a total value of all the checkboxes that are checked
  I've tried only this solution</em></strong></p>
  
  <p>my description is quite precise and self-explanatory</p>
  
  <p><strong>Javascript function</strong></p>
  
  <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;title&gt;On the go&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="menu.scss"&gt;
    &lt;script&gt;
      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 &lt; 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;
        }
    &lt;/script&gt;
    ***// adding checkboxes***
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt;Hot Beverages&lt;/h1&gt;
    &lt;div id="pricelist"&gt;
      &lt;input type="checkbox" name="hotbeverage" value="item1" price="25.00"&gt;Americano &lt;b&gt;R25.00&lt;/b&gt;&lt;br&gt;
      &lt;input type="checkbox" name="hotbeverage" value="item2" price="2"&gt;Caffe Latte &lt;b&gt;R30.00&lt;/b&gt;&lt;br&gt;
      &lt;input type="checkbox" name="hotbeverage" value="item3" price="3"&gt;Cappuccino &lt;b&gt;R15.00&lt;/b&gt;&lt;br&gt;
      &lt;input type="checkbox" name="hotbeverage" value="item4" price="4"&gt;Hot Chocolate&lt;b&gt;R20.00&lt;/b&gt;&lt;br&gt;
      &lt;input type="checkbox" name="hotbeverage" value="item5" price="5"&gt;Chai Latte &lt;b&gt;R20.00&lt;/b&gt;&lt;br&gt;
      &lt;input type="checkbox" name="hotbeverage" value="item6" price="6"&gt;ButterScotch latte&lt;b&gt;R28.00&lt;/b&gt;&lt;br&gt;
      &lt;input type="text" id="amount" value="0" /&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>I want the text field to populate with the value</strong></p>