title: How to get a sum of values of checked checkboxes in a loop in jQuery
body: <p>I have this code from my HTML form.</p>
  
  <pre><code>&lt;?php foreach ($charges as $c): ?&gt;
      &lt;br&gt;&lt;input type="checkbox" class="charge" id="charge&lt;?php echo $c-&gt;id; ?&gt;" data-cash="&lt;?php echo $c-&gt;amount; ?&gt;"&gt; &lt;?php echo $c-&gt;description; ?&gt;
  &lt;?php } ?&gt;
  
  &lt;div="total"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>when I tick a textbox I get the value of the checked checkbox using the following jQuery code.</p>
  
  <pre><code>$('.charge').change(function() {
      var v = $(this).data('cash');
      $('.total').html(v); 
  });
  
  // raise the event on checked elements on load:
  $('.charge:checked').change();
  </code></pre>
  
  <p>However, I'm supposed to get the sum of all the values of the checked boxes and display them. In addition, multiply the some values with another number before adding it to the other values from the checked checkboxes.</p>
  
  <pre><code>e.g Assume these are five checkboxes
  
  1800
  1200
  2000 (if checked, multiply by 4)
  3400
  2000 (if checked, multiply by 4)
  </code></pre>
  
  <p>For example, if you check the first 3 checkboxes from top to bottom, the value displayed should be 1800 then 3000 then, since 2000 will be multiplied by 4, get 11000. (that's 1800+1200+8000). The values displayed should also be subtracted automatically when the checkboxes are unchecked.</p>
  
  <p>How do I achieve that?</p>