title: Calculate total once checkbox is checked using javascript
body: <p>I am trying to create a javascript code for my website to do the calculations once a checkbox is checked. Each time i select a checkbox it should calculate the total price of the items.</p>
  
  <p>This is my html code:</p>
  
  <pre><code>&lt;form id="orderForm" action="#" method="get"&gt;
      &lt;section id="selectBook"&gt;
          &lt;h2&gt;Select books&lt;/h2&gt;
          &lt;?php
          include_once('database_conn.php');
          $sqlBooks = 'SELECT bookISBN, bookTitle, bookYear, catDesc,  bookPrice FROM nbc_book b inner join nbc_category c on b.catID = c.catID WHERE 1 order by bookTitle';
          $rsBooks = mysqli_query($conn, $sqlBooks);
          while ($book = mysqli_fetch_assoc($rsBooks)) {
              echo "\t&lt;div class='item'&gt;
                      &lt;span class='bookTitle'&gt;{$book['bookTitle']}&lt;/span&gt;
                      &lt;span class='bookYear'&gt;{$book['bookYear']}&lt;/span&gt;
                      &lt;span class='catDesc'&gt;{$book['catDesc']}&lt;/span&gt;
                      &lt;span class='bookPrice'&gt;{$book['bookPrice']}&lt;/span&gt;
                      &lt;span class='chosen'&gt;&lt;input type='checkbox' name='book[]' value='{$book['bookISBN']}' title='{$book['bookPrice']}' /&gt;&lt;/span&gt;
                  &lt;/div&gt;\n";
          }
          ?&gt;
      &lt;/section&gt;
  
      &lt;section id="collection"&gt;
          &lt;h2&gt;Collection method&lt;/h2&gt;
          &lt;p&gt;Please select whether you want your chosen book(s) to be delivered to your home address (a charge applies for this) or whether you want to collect them yourself.&lt;/p&gt;
          &lt;p&gt;
          Home address - &amp;pound;3.99 &lt;input type="radio" name="deliveryType" value="home" title="3.99" checked = "checked" /&gt;&amp;nbsp; | &amp;nbsp;
          Collect from warehouse - no charge &lt;input type="radio"  name="deliveryType" value="trade" title="0" /&gt;
          &lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="checkCost"&gt;
          &lt;h2&gt;Total cost&lt;/h2&gt;
          Total &lt;input type="text" name="total" id="total" size="10" readonly="readonly" /&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>The code has been separated into  tag.</p>
  
  <p>This is my current javascript code which i have written:</p>
  
  <pre><code>var item = document.getElementsByClassName("item");
      var chkbox = document.getElementsByTagName("input");
  
      for(var i = 0; i &lt; chkbox.length; i++){
          chkbox[i].onchange = function(){
              //Recalculate total
              getTotal();
          }
      }
  
      function getTotal(){
          var total = 0.0;
  
          for(var i = 1; i &lt;= chkbox.length; i++){
              //If the checkbox is checked, add it to the total
              if(chkbox[i-1].checked){
                  total = total + parseFloat(chkbox[i].value);
              }
          }
  
          return total;
  
          document.getElementById("total").innerHTML = total;
      }
  </code></pre>
  
  <p>I really need some experts to help me on this. Thank you.</p>