Price Calculator

HTML

<ul>
  <li>
    <input type="checkbox" class="option1" value="100" id="ItemA" />
    <label for="ItemA">Item A<span style="padding-left:108px;">100 €</span></label>
  </li>
  <li>
    <input type="checkbox" class="option1" value="200" id="ItemB" />
    <label for="ItemB">Item B<span style="padding-left:108px;">200 €</span></label>
  </li>
  <li>
    <input type="checkbox" class="option1" value="300" id="ItemC" />
    <label for="ItemC">Item C<span style="padding-left:108px;">300 €</span></label>
  </li>
  <li><strong>Preis <span class="total">0 €</span></strong></li>
</ul>

<ul>
  <li>
    <input type="checkbox" class="option12" value="100" id="ItemA2" />
    <label for="ItemA2">Item A2<span style="padding-left:100px;">100 €</span></label>
  </li>
  <li>
    <input type="checkbox" class="option12" value="200" id="ItemB2" />
    <label for="ItemB2">Item B2<span style="padding-left:100px;">200 €</span></label>
  </li>
  <li>
    <input type="checkbox" class="option12" value="300" id="ItemC2" />
    <label for="ItemC2">Item C2<span style="padding-left:100px;">300 €</span></label>
  </li>
  <li><strong>Price <span class="total2">0 €</span></strong></li>
</ul>

<ul>
  <li>
    <input type="checkbox" class="option13" value="100" id="ItemA3" />
    <label for="ItemA3">Item A3<span style="padding-left:100px;">100 €</span></label>
  </li>
  <li>
    <input type="checkbox" class="option13" value="200" id="ItemB3" />
    <label for="ItemB3">Item B3<span style="padding-left:100px;">200 €</span></label>
  </li>
  <li>
    <input type="checkbox" class="option13" value="300" id="ItemC3" />
    <label for="ItemC3">Item C3<span style="padding-left:100px;">300 €</span></label>
  </li>
  <li><strong>Price <span class="total3">0 €</span></strong></li>
</ul>


<h4>Overallprice: <span class="overallprice" style="font-size:30px;">0</span></h4>

JavaScript

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    var total = 0;
    //var item = [];
    var $parent = $(this).closest('ul');
    $parent.find('input:checked').each(function() {
      total += parseInt($(this).val());
      //item.text();
    });
    $parent.find('span[class^=total]').html(total + ' €');

    var overallPrice = 0;
    $('span[class^=total]').each(function() {
      overallPrice += parseInt($(this).html().replace(' €',''));
    });
    $('.overallprice').html(overallPrice)
    //$('.overallprice').append(item);
  });
});