title: jQuery - Retrieve values from HTML elements and return their sum
body: <p>I got a <code>form</code> with several <code>checkbox</code>'s where the user can choose multiple values, like so:</p>
  
  <pre><code>&lt;div&gt;
      &lt;input id="myinput1" type="checkbox" value="choice_id_1" /&gt;
      &lt;label for="myinput1"&gt;5&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input id="myinput2" type="checkbox" value="choice_id_2" /&gt;
      &lt;label for="myinput2"&gt;10&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input id="myinput3" type="checkbox" value="choice_id_3" /&gt;
      &lt;label for="myinput3"&gt;10&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to get the values from each <code>:selected</code> checkbox <code>label</code> and return their total sum <em>(ie: total = 25)</em>.</p>
  
  <p>So far I have been trying to get the <code>strings</code> from the <code>labels</code> with the <code>.text()</code> method, make an <code>array</code> with the results, converting them to <code>int</code> with <code>parseFloat()</code> and sum the array elements... obviosly with no success.</p>
  
  <p>This is what i got <em>(for sure not the best approach so I'm open to diferent solutions)</em>:</p>
  
  <pre><code>function totalSum() {
      var prices = $("input:checkbox:checked").siblings("label").text();
      var myArray = $.makeArray(prices);
  
      var total = 0;
      for(var i = 0; i &lt; myArray.length; i++){
          var thisVal = parseFloat(myArray[i]);
          if(!isNaN(thisVal)){
              total += thisVal;
          }
      };
  
      $(".mydiv").text(total);
  };
  
  totalSum();
  $("input:checkbox").change(totalSum);
  </code></pre>