Update price/number based on multiple checked checkboxes

Question

I'm setting up a package page with multiple packages/prices. To get an idea/example, similar to Spotify plans: https://www.spotify.com/nl/premium/#plans

The thing is that i want to update the price of the plan based on additional options, these options are checkboxes on the page. It can be none selected, one selected or multiple selected.

I managed to get so far to get it working for one checkboxes, but can't get it working for multiple checkboxes if i just copy the code. Here's my code:

Can someone help met to set it up for multiple checkboxes?

function calculate() { var j = document.getElementById("output"); let span = document.getElementById("lala"); var rege = /^[0-9]*$/; var tons = 12; if (rege.test(tons)) { val = parseInt(tons); var treesSaved = 10.45; if ($('input[name="mv-box"]').is(":checked")) { span.textContent = treesSaved + 4; } else { span.textContent = treesSaved; } } else alert("Error in input"); } $(function() { $('input[name="mv-box"]').change(function() { calculate(); }); });

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input type="checkbox" name="mv-box" value="1" aria-invalid="false"> MV-box + 4 euro <input type="checkbox" name="airco" value="1" aria-invalid="false"> Airco + 6 euro <br /> <span id="lala">10.45</span> euro

Do not assign the value to span.textContent directly, but calculate the price in a variable first. Assign the value of that variable, after you are done with going through all relevant checkboxes. — C3roe
– C3roe, Commented Jun 20 at 13:09
I would store the relevant amount in each checkbox input (data-amount="4") and then retrieve all checked boxes and adding their data-amount attributes. — mykaf
– mykaf, Commented Jun 20 at 13:23

mplungjan · Accepted Answer · 2025-06-20 13:55:22Z

Wrap you checkboxes into an element and use it to handle them all generically. I would use inputs' values to store the price changes:

function calculate() { let price = 10.45; $('.options input:checked').each((_, input) => { price += parseFloat(input.value); }); lala.textContent = price.toFixed(2); } $(function() { $('.options input').change(function() { calculate(); }); });

.options label { cursor: pointer; user-select: none; } .options label:hover { text-decoration: underline; }

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="options"> <label><input type="checkbox" value="4" aria-invalid="false"> MV-box + 4 euro</label> <label><input type="checkbox" value="6" aria-invalid="false"> Airco + 6 euro</label> </div> <br /> <span id="lala">10.45</span> euro

mplungjan · Accepted Answer · 2025-06-22 07:46:04Z

Delegate from the closest static container.
Wrap each checkbox in a label with the data-value attribute.

let baseValue = 10.45; // moved from "lala" const $container = $('#container') .on('click', '[type=checkbox]', function() { let total = 0; const $checked = $container.find('[type=checkbox]:checked'); if ($checked.length) { total = $checked.map(function() { return +this.closest('label').dataset.value; }) .get() .reduce((a, b) => a + b, baseValue); } $('#output').text(total.toFixed(2)) })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div id="container"> <label data-value="4"><input type="checkbox" name="mv-box" value="1" aria-invalid="false"> MV-box + 4 euro</label> <label data-value="6"><input type="checkbox" name="airco" value="1" aria-invalid="false"> Airco + 6 euro</label> </div> <br /> <span id="output">0.00</span> euro

How can i remove the "lala" span? When i remove it it doesnt work as the function seems to use it.

Collectives™ on Stack Overflow

Update price/number based on multiple checked checkboxes

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related