CODEWITHSUNDEEP
jquery
PHPFromTheBack
PHPFromTheBack

Reputation: 93

How to get data values of checkboxes and add or subtract values based on whether they are checked or unchecked in jquery

I have multiple checkboxes. I am wondering if there is an easy way in jquery to add and subtract the values when the user checks them or unchecks them.

Checkboxes : Just standard checkboxes, masked in toggle switches.

 <div class="col-xs-6 col-sm-6 col-md-6 text-right">
     <label class="switch">
     <input type="checkbox" class="itemSelection" id="item1" data-price-id="400" value="2">
     <span class="slider round"></span>
 </div>
 <div class="col-xs-6 col-sm-6 col-md-6 text-right">
     <label class="switch">
     <input type="checkbox" class="itemSelection" id="item2" data-price-id="160" value="3">
     <span class="slider round"></span>
 </div>

Values : So what I am looking to do is grab the data-price-id values and either add or subtract them from a total if they are checked or unchecked. The value of the checkbox (2,3) is a static value, since it is passed to the php class and used for querying the database. I am just looking for a simple display of the prices from the data-price-id values. Example: If item1 is checked then the data-price-id value (400) will be displayed in the Total div. If item2 is checked as well, it adds them together(400 + 160). If one of them are unchecked then it subtracts the value. (Removes it from the total). Simple calculations.

Total : I am displaying the values in the following div

<div id="totalDisplayUpdate">
    <div class="pull-right" id="totalDisplay" style="font-size:20px;font-weight:bold;color:#336699;">Total: $<span id="costTotal">0.00</span></div><br/>
</div>

Previous setup : I had originally used this, and it worked well for adding/subtracting prices, but for mobile layout, you had to click twice on the multi selection dropdown in order for it to display the price. The onclick just didn't work for mobile that well.

$('#requestedItems').on("click", function(){
    //$("#totalDisplay").show();
    const values = $("input[type='checkbox']",this)
    .map(function() { return +this.dataset.value }).get(); // an array of integers that may be empty
    const sum = values.length ? values.reduce((a,b)=>a+b) : 0; // if not empty, sum the values
    $("#costTotal").text(sum);
});

Upvotes: 2

Views: 170

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337570

To do what you require you can hook a change event, note: not a click event, to the checkboxes. From there you can build an array of the checked data values and reduce() them to generate the total. Try this:

let $total = $('#total');
let $checkboxes = $('.itemSelection').on('change', e => {
  let total = $checkboxes.filter(':checked').map((i, el) => parseInt(el.dataset.priceId, 10)).get().reduce((a, b) => a + b, 0);
  $total.html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6 col-sm-6 col-md-6 text-right">
  <label class="switch">
    <input type="checkbox" class="itemSelection" id="item1" data-price-id="400" value="2" />
    <span class="slider round"></span>
  </label>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 text-right">
  <label class="switch">
    <input type="checkbox" class="itemSelection" id="item2" data-price-id="160" value="3" />
    <span class="slider round"></span>
  </label>
</div>

<div id="total">0</div>

Upvotes: 1

Related Questions