title: Jquery select all checked checkboxs with data-price and add them together
body: <p>I'm creating a custom computer building but I'm struggling to update the total price.</p>
  
  <p>The user selects what processor they want, and it uses <code>data-price</code> to add onto the price.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div class="process_intel_options" style="display:block"&gt;
              &lt;label class="option"&gt;
                  &lt;input type="radio" name="processor_options" value="i7950" data-price="155"  id="intel_options_0" checked="checked" /&gt;
                  Intel Core i7 950 3.06Ghz
                  &lt;/label&gt;
              &lt;br /&gt;
              &lt;label class="option"&gt;
                  &lt;input type="radio" name="processor_options" value="i7960" data-price="250" id="intel_options_1" /&gt;
                  Intel Core i7 960 3.20Ghz
                  &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="process_amd_options" style="display:none"&gt;
              &lt;label class="option"&gt;
                  &lt;input type="radio" name="processor_options" value="i7950" data-price="150" id="amd_options_0" /&gt;
                  AMD Core i7 950 3.06Ghz
                  &lt;/label&gt;
              &lt;br /&gt;
              &lt;label class="option"&gt;
                  &lt;input type="radio" name="processor_options" value="i7960" data-price="352" id="amd_options_1" /&gt;
                  AMD Core i7 960 3.20Ghz
                  &lt;/label&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And my JavaScript, I'm very new to JavaScript so excuse any schoolboy errors!</p>
  
  <pre><code>var base_price = 300;
  $("#final_price").html(base_price);
  
  $("*").click(function() {
      // Update price
  
      // Select all checked
      $(":checkbox").each(function(index) {
          // Select all checked and with a price
          $(this).data("price").each(function(index) {
              // Add the prices
              base_price += $(this).data("price");
          });
      });
      $("#final_price").html(base_price);
  
  });
  </code></pre>
  
  <p>The reason it loops is because the user can choose a graphics card, motherboard etc from a radio (or checkbox) list.</p>
  
  <p>Here is my exmple live : <a href="http://genyx.co.uk/CCB/" rel="nofollow">http://genyx.co.uk/CCB/</a></p>
  
  <p>Please note only the processors currently have <code>data-price</code> on them.</p>