Общая сумма значений флажков

Question

У меня есть простой код флажка, 2 флажка на группу.

    <div class='product-addon'>
        <p>Interfejsy</p>
        <label>
            <input id='option0' type='checkbox' name='Interfejsy' value='150.00'>
            Moduł rozszerzenia 1: 2x RS232 <span class='addon-price'>150,00</span>
        </label>
        <label>
            <input id='option1' type='checkbox' name='Interfejsy' value='370.67'>
            Moduł rozszerzenia 2: WiFi <span class='addon-price'>370,67</span>
        </label>
    </div>
    <div class='product-addon'>
        <p>BAZA</p>
        <label>
            <input id='option0' type='checkbox' name='BAZA' value='60.00'>
            Rozszerzenie bazy PLU o 2000 kodów  <span class='addon-price'>60,00</span>
        </label>
        <label>
            <input id='option1' type='checkbox' name='BAZA' value='80.00'>
            Rozszerzenie bazy PLU o 4000 kodów  <span class='addon-price'>80,00</span>
        </label>
    </div>

Мой вопрос: Как я могу получить общую сумму цены (checkbox.val ()), когда пользователь нажимает флажок?Например, пользователь устанавливает флажок в первой группе со значением = 150,00, и устанавливает флажок во второй группе со значением = 80,00?Общая сумма должна быть 230,00 Важно: пользователь может выбрать только один флажок в группе.

У меня есть этот код js:

    var totalSum = 0;
    $("input:checkbox").on('click', function() {
      var $box = $(this);

      if ($box.is(":checked")) {
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        var addonPrice = parseFloat($box.val());
        $(group).prop("checked", false);
        $box.prop("checked", true);
      } else {
        $box.prop("checked", false);
      }

      totalSum += addonPrice;
      console.log(totalSum);
    });

, но переменная totalSum всегда становится выше, когда я нажимаю любойдобавить.Например, я нажимаю флажок в группе 1 со значением = 150, следующий щелчок флажок в группе 2 со значением = 60, totalSum = 210 - это хорошо, но когда я нажимаю снова какой-то флажок, это добавляет следующее значение.

Я просто не хочу что-то вроде этого: 1) Флажок щелчка пользователя в группе 1 со значением = 150 2) Флажок щелчка пользователя в группе 2 со значением = 60 3) Общая сумма 210 4) Флажок щелчка пользователя вгруппа 2 со значением = 80 5) общая сумма 230, а не 290

Спасибо за любые предложения

Answer 1

Ваша основная проблема заключается в том, что вы инициализируете totalSum только один раз , вне вашей функции обратного вызова, поэтому независимо от того, сколько щелчков произойдет, общая сумма никогда не будет сброшена.Это должно быть перенесено в функцию, чтобы вы начали с общей суммы 0 и получали сумму при каждом последующем щелчке.

Теперь, исходя из того, что вы делаете с переключением проверенного статусаиз флажков ясно, что вы должны использовать переключатели, а не флажки .И внесение этого изменения делает решение намного проще.

См. Комментарии ниже:

$("input:radio").on('click', function() {
  var totalSum = 0;   // Start getting a new total on each new click
  
  // Just loop over only the checked radio buttons
  $("input[type='radio']:checked").each(function(index, element){
    totalSum += +$(element).val(); // Add up their values
  });
    
  console.clear(); console.log(totalSum.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='product-addon'>
        <p>Interfejsy</p>
        <label>
            <input id='option0' type='radio' name='Interfejsy' value='150.00'>
            Moduł rozszerzenia 1: 2x RS232 <span class='addon-price'>150,00</span>
        </label>
        <label>
            <input id='option1' type='radio' name='Interfejsy' value='370.67'>
            Moduł rozszerzenia 2: WiFi <span class='addon-price'>370,67</span>
        </label>
</div>
<div class='product-addon'>
        <p>BAZA</p>
        <label>
            <input id='option0' type='radio' name='BAZA' value='60.00'>
            Rozszerzenie bazy PLU o 2000 kodów  <span class='addon-price'>60,00</span>
        </label>
        <label>
            <input id='option1' type='radio' name='BAZA' value='80.00'>
            Rozszerzenie bazy PLU o 4000 kodów  <span class='addon-price'>80,00</span>
        </label>
    </div>

Answer 2

Вы не вычитаете значение измененного ввода, если оно не было проверено.

Другой способ сделать это - просто выбрать все проверенные входы и суммировать их значения.

Что-токак это:

$("input:checkbox").change(function(e){
    if($(this).is(":checked")){
        $(`[name=${this.name}]`).not($(this)).prop("checked", false);
    }
    var total = $.makeArray($("input:checkbox:checked").map(function(){
        return parseInt($(this).val());
    })).reduce((a, c) => (a+c), 0)
    console.log(total)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='product-addon'>
        <p>Interfejsy</p>
        <label>
            <input id='option0' type='checkbox' name='Interfejsy' value='150.00'>
            Moduł rozszerzenia 1: 2x RS232 <span class='addon-price'>150,00</span>
        </label>
        <label>
            <input id='option1' type='checkbox' name='Interfejsy' value='370.67'>
            Moduł rozszerzenia 2: WiFi <span class='addon-price'>370,67</span>
        </label>
    </div>
    <div class='product-addon'>
        <p>BAZA</p>
        <label>
            <input id='option0' type='checkbox' name='BAZA' value='60.00'>
            Rozszerzenie bazy PLU o 2000 kodów  <span class='addon-price'>60,00</span>
        </label>
        <label>
            <input id='option1' type='checkbox' name='BAZA' value='80.00'>
            Rozszerzenie bazy PLU o 4000 kodów  <span class='addon-price'>80,00</span>
        </label>
    </div>

Переключатели будут более подходящими для того, что вы пытаетесь сделать, вместо флажков.