Использование jquery для суммирования значений различных переключателей Bootsrap (включая умножение некоторых раскрывающихся параметров)

Question

Вот упрощенная версия корзины для покупок, которую я пытаюсь создать: я хотел бы сложить значения переключателей, включая умножение на значение раскрывающихся селекторов на переключателях, у которых они есть (например, reampSwitch3 / Amp Simulator Matching).

Вот HTML:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input reampingSwitch" id="reampSwitch1" value="20">
  <label class="custom-control-label" for="reampSwitch1">Live Reamping Deposit</label>
</div>

        <div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input reampingSwitch" id="reampSwitch2" value="30">
  <label class="custom-control-label" for="reampSwitch2">Another Service</label>
</div>

        <div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="reampSwitch3">
  <label class="custom-control-label" for="reampSwitch3" value="10" >Amp simulator matching</label>


            <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected value="0">How Many Tracks?</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>

  </select>
    </div>



        <div class="total" id="reampTotal">

      <div class="alert alert-info" role="alert" id="reampSubtotal">
   Reamping Total : £0
</div>
      </div>

У меня есть следующие jQuery, которые могут складывать переключатели без раскрывающихся списков и отображать их в div reampSubtotal. Я не могу понять, как сделать умножение и добавить их к общей сумме:

   $(".reampingSwitch").click(function() {
    var total = 0;
    $(".reampingSwitch:checked").each(function() {
        total += parseInt($(this).val(), 10);
    });
         $("#reampSubtotal").html("Reamping Total : £" + (total));       


});

Здесь вы можете увидеть живую версию:
http://www.recordingdoctor.com/Checkboxes.html

Answer 1

Вы могли бы сделать это вот так. Я позаботился о ситуации, когда кто-то выбирает другое количество треков после выбора другого количества треков, добавляя атрибут данных data-selected для сохранения предыдущего выбора и вычитая его из общего количества, чтобы предотвратить добавление разных вариантов выбора треков к итогу.

$(".reampingSwitch").click(function() {
  let total = parseInt($("#reampSubtotal").text().replace("Reamping Total : £", ""));  
  if($(this).is(":checked")){
     total += parseInt($(this).attr("value"));
  }
  else if(!$(this).is(":checked")) {
     total -= parseInt($(this).attr("value"));
  };
  $("#reampSubtotal").html("Reamping Total : £" + (total));
});

$("#inlineFormCustomSelectPref").change(function() {
  if ($("#reampSwitch3").prop("checked") == true) {
    let selected = $(this).val();
    let price = selected * $("label[for='reampSwitch3']").attr("value");
    let total = parseInt($("#reampSubtotal").text().replace("Reamping Total : £", ""));
    if($(this).attr("data-selected")){
       let previous = $(this).attr("data-selected");
       let previousPrice = previous * $("label[for='reampSwitch3']").attr("value");
       total -= previousPrice;
    }
    total += price;
    $("#reampSubtotal").html("Reamping Total : £" + (total));
    $(this).attr("data-selected", selected);
  }
});
$("#reampSwitch3").click(function() {
  if ($("#inlineFormCustomSelectPref").val() > 0 && $(this).prop("checked") == true) {
       let selected = $("#inlineFormCustomSelectPref").val();
       let price = selected * $("label[for='reampSwitch3']").attr("value");
       let total = parseInt($("#reampSubtotal").text().replace("Reamping Total : £", ""));
       total += price;
       $("#reampSubtotal").html("Reamping Total : £" + (total));
  } 
  else if ($("#inlineFormCustomSelectPref").val() > 0 && $(this).prop("checked") == false) {
       let selected = $("#inlineFormCustomSelectPref").val();
       let price = selected * $("label[for='reampSwitch3']").attr("value");
       let total = parseInt($("#reampSubtotal").text().replace("Reamping Total : £", ""));
       total -= price;
       $("#reampSubtotal").html("Reamping Total : £" + (total));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input reampingSwitch" id="reampSwitch1" value="20">
  <label class="custom-control-label" for="reampSwitch1">Live Reamping Deposit</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input reampingSwitch" id="reampSwitch2" value="30">
  <label class="custom-control-label" for="reampSwitch2">Another Service</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="reampSwitch3">
  <label class="custom-control-label" for="reampSwitch3" value="10">Amp simulator matching</label>


  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected value="0">How Many Tracks?</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>

  </select>
</div>



<div class="total" id="reampTotal">

  <div class="alert alert-info" role="alert" id="reampSubtotal">
    Reamping Total : £0
  </div>
</div>