Total sum of checkbox values

Question

I have a simple checkbox code, 2 checkboxes per group.

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

My question is: How i can get total sum of price (checkbox.val()) when user click checkbox? For example user click checkbox in first group with value=150.00, and click checkbox in second group with value=80.00? Total sum should be 230.00 Important: user can select only one checkbox in group.

I have that js code:

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

but the variable totalSum is always getting higher, when i click any addon. For example i click checkbox in group 1 with value=150, next click checkbox in group 2 with value=60, totalSum = 210 it's good, but when i click again some checkbox it's adding next value.

I just wan't something like this: 1) User click checkbox in group 1 with value=150 2) User click checkbox in group 2 with value=60 3) totalSum is 210 4) User click checkbox in group 2 with value=80 5) totalSum is 230, not 290

Thanks for any suggestions

Answer 1

You don't subtract the value of the changed input if it was unchecked.

Another way of doing this is to just select all the checked inputs and sum their values.

Something like this:

 $("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> 

Radio buttons will be more appropriate for what you're trying to do instead of checkboxes.

Answer 2

Your main problem is that you are only initializing the totalSum once , outside of your callback function, so no matter how many clicks happen, the total is never reset. That has to be moved into the function so that you start off with a total of 0 and get the total upon each successive click.

Now, based on what you are doing with the toggling of the checked status of the checkboxes, it's clear that you should be using radio buttons, not checkboxes . And, making that change makes the solution much simpler.

See comments inline below:

 $("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>