如何使复选框数据在计算脚本中增加总数的25%?

时间:2019-06-12 23:47:17

标签: jquery checkbox sum multiplying

我有一个内置于Jquery中的计算器 它基本上将data-price =“”加在一起,但是我需要将每个复选框的总金额加25%。

现在,它只是将复选框值添加到计算中,我需要它将总计增加25%。

因此,如果当前总金额为400英镑,然后在复选框中打勾,则计算器应收取400英镑,并将其加25%,使其变为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);
  }
});

一些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>

我真的不确定这一点,任何帮助将不胜感激

谢谢

2 个答案:

答案 0 :(得分:0)

您需要分别遍历checkbox

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);
  } 

答案 1 :(得分:0)

可以这样做。 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);
  }
});