How can I make checkbox data add 25%of the total i

Question

I have a calculator built in Jquery It basically add the data-price="" together, However I need to add 25% onto the the total amount for each check box which is ticked.

Right now it just adds the checkbox value to the calculation, I need it to add 25% to the total.

So if the current total is £400 and then a checkbox is ticked, the calculator should then take £400 and add 25% to it making it £450

$(function(){

    $("select.valuvehiclevalue1").on("change", calc);
  $("select.valuvehiclevalue2").on("change", calc);
    $("select.valuvehiclevalue3").on("change", calc);
      $("select.valuvehiclevalue4").on("change", calc);
        $("select.valuvehiclevalue5").on("change", calc);
  $("input[type=checkbox].calculate").on("click", calc);

  function calc() {
   var basePrice = 0;
    newPrice = basePrice;

    $("select.valuvehiclevalue1 option:selected, select.valuvehiclevalue2 option:selected, select.valuvehiclevalue3 option:selected, select.valuvehiclevalue4 option:selected, select.valuvehiclevalue5 option:selected, input[type=checkbox].calculate:checked").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });

    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
  }
});

A bit of HTML

  <label>How long do you want the cover?</label>
<select class="valuvehiclevalue5" name="howlongcover"  id="valuvehiclevalue4">
 <option data-price="0">Pick one!</option>
 <option id="howlongcover1" value="valuhowlongcover" data-price="122" >24 Months e</option>
<option id="howlongcover2" value="valuhowlongcover"data-price="134" >36 Months</option>
<option id="howlongcover3" value="valuhowlongcover"data-price="155" >48 Months</option>
<option id="howlongcover4" value="valuhowlongcover"data-price="354" >60 Months</option>
 </select>



<label><input class="calculate" id="checkboxes" type="checkbox" name="checks" data-price="25"><span></span> It's classed as a 4x4</label><BR>

  <label><input class="calculate" id="checkboxes1"  type="checkbox" name="checks" data-price="25"><span></span> The engine is more than 2.5L</label><BR>

    <label><class="calculate" id="checkboxes2" type="checkbox" name="checks" data-price="25"><span></span> It's a commercial use</label><BR>


£<span id="item-price">0.00</span>

I am really unsure about this one, any help would be greatly appreciated

Thank you

Answer 1

You need to loop through the checkboxes separately

function calc() {
   var basePrice = 0;
    newPrice = basePrice;

    $("select.valuvehiclevalue1 option:selected, select.valuvehiclevalue2 option:selected, select.valuvehiclevalue3 option:selected, select.valuvehiclevalue4 option:selected, select.valuvehiclevalue5 option:selected").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });
    var percentage = 0;
    $("input[type=checkbox].calculate:checked").each(function(){
        percentage += parseInt($(this).data('price'), 10);
    });
    newPrice = newPrice + (newPrice * percentage / 100 );
    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
  } 

Answer 2

Could do this way. Can see it working here.

$(function(){

    $("select.valuvehiclevalue1").on("change", calc);
    $("select.valuvehiclevalue2").on("change", calc);
    $("select.valuvehiclevalue3").on("change", calc);
    $("select.valuvehiclevalue4").on("change", calc);
    $("select.valuvehiclevalue5").on("change", calc);
    $("input[type=checkbox].calculate").on("click", calc);

  function calc() {
   var basePrice = 0;
    newPrice = basePrice;

    $("select.valuvehiclevalue1 option:selected, select.valuvehiclevalue2 option:selected, select.valuvehiclevalue3 option:selected, select.valuvehiclevalue4 option:selected, select.valuvehiclevalue5 option:selected").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });

    $("input[type=checkbox].calculate:checked").each(function () {
      var price = $("#item-price").html();
      newPrice += price * .25;
    });

    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
  }
});