Display and sum values from selected checkboxes different in divs at the same time

Question

I'm super new here, so this question might seem stupid to you.

I have a website in which I show some checkboxes. Those checkboxes have some values that need to be summed with a price, and they also have a text that need to be and displayed in a div.

Here's the demo website, as you can see, the checkboxes need to sum their own price with the orange pices (they have two different divs), and then insert the value inside the div with id=plus-display.

For now I guessed this solutions but it's not working at all.

var basicPrice = 784 ; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
 CurrentPrice = basicPrice,
   plus = [],
   total = 0;
   console.log(currentPrice)
  $("input[id^=plus]").each(function() {
    if (this.checked) {
      total += +this.value;
      plus.push($("[for=" +this.id + "]").html()); // get the label text
    }
  });

 $("#plus-display").html(plus.join(", "));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="rata-display-1" class="span text-sottotitolo_dimensione _2 rata checkout">784 €</span>

<br> <br><br>

<div id="plus-display" class="text_piccolo black checkout">PLUS:<strong>place in which display the name of the checkboxes</strong></div>

<br><br><br>

<span id="rata-display-2" class="prezzo-checkout">784 €</span>

<br><br><br>

<form id="plus" name="plus" data-name="plus" class="form-5">
          <div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
          <div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br>‍</strong>+7 € al mese</label></div>
          <div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br>‍</strong>+9 € al mese</label></div>
          <div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br>‍‍</strong>+15 € al mese</label></div>
          <div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br>‍‍</strong>+123 € al mese</label></div>
          <div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br>‍</strong>+4 € al mese</label></div>
          <div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br>‍‍</strong>+45 € al mese</label></div>
          <div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br>‍</strong>+36 € al mese</label></div>
</form>

Sorry, my error.. i've edited the question.. it's not service but plus.. i want to join the data from the `id=plus` in the div with `id=plus-display` — Stefano Zanetti, Sep 19 '18 at 09:17
`.join` **will not sum** values in array, it will just join them with `,` as separator. Is this what you want? — azrahel, Sep 19 '18 at 09:23
if you want it summed, you can use `reduce` array method. https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/Reduce#Example:_Sum_up_all_values_within_an_array — azrahel, Sep 19 '18 at 09:26
yes, it's correct.. I want to join their name in the `div` with `id=plus-display` and then, at the same time, I want to sum the values of the checkboxes with the two divs with `id=rata-display-1` and `id=rata-display-1`. — Stefano Zanetti, Sep 19 '18 at 09:27
@StefanoZanetti check my answer now. Logic is there, just adjust to your code :). Remember that when you *uncheck* checkbox you need to subtract from sum (I think currently no other answer than mine does that) — azrahel, Sep 19 '18 at 09:42

azrahel · Answer 1 · 2018-09-19T09:46:39.537

Pure JS solution:

const form = document.getElementsByTagName("form")[0]

form.addEventListener("click", (e) => { // taking advantage of eventBubbling here
  const target = e.target

  if(String(target).toLowerCase().includes("input")) { // naive check if clicked element is input - you should implement better check most probably
    const clickedCheckboxValue = parseFloat(target.value)
    const currentSumElement = document.querySelector("#sum") 
    const currentSum = parseFloat(currentSumElement.innerText)    

    currentSumElement.innerText = target.checked
      ? currentSum + clickedCheckboxValue 
      : currentSum - clickedCheckboxValue 
  }
})

When is this code getting fired? You don't have any kind of eventListener here, do you have it in your code somewhere?

Would be nice to know context of how this method is getting fired.

Generally I would advice different approach:

add event listener to each checkbox (or to their common parent, so you can take advantage of eventBubbling - this is common scenario)
on click, check if clicked checkbox is:
- checked - you should add to your sum
- unchecked - you should subtract from your sum
get value that is next to checkbox
add/subtract to sum

Also please describe what should happen in more details. ex. on #someID click get value that is in .someClassName and add/subtract it to value that is in #someOtherID

Rough sketch in codepen:

https://codepen.io/anon/pen/mGaVoe

score 2 · Answer 2 · answered Sep 19 '18 at 09:44

I just created one simple solution. May be it will be easier. The steps are as follows :

Declare a Click event on the class that you added on all the checkbox ("I am assuming check-plus is the class that available on the checkboxes only")
On the click event just call the .each in JQuery and calculate the total sum and display that..

Please take a look into the code sample to understand properly.

$('.check-plus').click(function(e){
let sum = 784; // Base Price
 $(":checked").each(function(){
     //   console.log($(this).val());
        sum = sum + Number($(this).val());
     //   console.log("Total Amount :",sum);
    });
  $('#display').html("Total Amount is : "+sum+"€");  
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form id="plus" name="plus" data-name="plus" class="form-5">
          <div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
          <div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br>‍</strong>+7 € al mese</label></div>
          <div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br>‍</strong>+9 € al mese</label></div>
          <div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br>‍‍</strong>+15 € al mese</label></div>
          <div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br>‍‍</strong>+123 € al mese</label></div>
          <div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br>‍</strong>+4 € al mese</label></div>
          <div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br>‍‍</strong>+45 € al mese</label></div>
          <div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br>‍</strong>+36 € al mese</label></div>
</form>

<h2 id="display">

</h2>

it wored! but i've another question.. it is possible to display the `name` of the checkboxes in a div with `id=plus-display` like that? `$("#plus-display").html(plus.join(", "));` — Stefano Zanetti, Sep 19 '18 at 10:07
Yes It is possible... https://jsfiddle.net/jub19tav/16/ Please look at this code.. — Pranbir Sarkar, Sep 19 '18 at 10:40

Christer · Answer 3 · 2018-09-19T11:09:27.213

Your input does not have an ID that starts with plus, and so your selector is at fault here. You can use form#plus div[class^=plus-] input as your selector. This limits the scope of the selector as well as to avoid collision.

in the first lines of your javascript there also seems to be something going on:

var currentPrice = basicPrice; // every time
 CurrentPrice = basicPrice,
   plus = [],
   total = 0;

You probably didnt meen to setup currentPrice AND CurrentPrice (two different variables) - And your missing var keyword in front of the declaration.

Hope this helps, without taking the fun out of coding it for you! :)

Looking at it, you can also remove the `div[class^=plus-]` from the selector if you want to. — Christer, Sep 19 '18 at 09:19

Albeis · Accepted Answer · 2018-09-19T12:37:30.203

I will add a event listener on checkbox. So each time it changes, you can recompute what you need. In addition I have changed the selector for the foreach because you don't have id starting by plus... Hope it helps.

var basicPrice = 784 ; // This is how we start
$(document).on('change','input[type=checkbox]', getCheck);
function getCheck() {
var currentPrice = basicPrice; // every time
 CurrentPrice = basicPrice,
   plus = [],
   total = 0;
   console.log(currentPrice)
  $("input[type=checkbox]").each(function(i, el) {
   
    if ($(el).is(":checked")) {
     
      total += parseInt($(el).val());
      console.log(total);
      // UPDATE:
      plus.push($(el).data('name')); // get the label text
    }
  });

 $("#plus-display").html(plus.join(", "));
 $('#rata-display-2').html(total);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="rata-display-1" class="span text-sottotitolo_dimensione _2 rata checkout">784 €</span>

<br> <br><br>

<div id="plus-display" class="text_piccolo black checkout">PLUS:<strong>place in which display the name of the checkboxes</strong></div>

<br><br><br>

<span id="rata-display-2" class="prezzo-checkout">784 €</span>

<br><br><br>

<form id="plus" name="plus" data-name="plus" class="form-5">
          <div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
          <div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br>‍</strong>+7 € al mese</label></div>
          <div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br>‍</strong>+9 € al mese</label></div>
          <div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br>‍‍</strong>+15 € al mese</label></div>
          <div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br>‍‍</strong>+123 € al mese</label></div>
          <div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br>‍</strong>+4 € al mese</label></div>
          <div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br>‍‍</strong>+45 € al mese</label></div>
          <div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br>‍</strong>+36 € al mese</label></div>
</form>

It worked! i've a question.. instead to push the html from this line: `plus.push($("[for=" +this.id + "]").html());` is it possible to push the `name` or `data-name`? Something like that--> `plus.push($("[for=" +this.id + "]").data(name));` ?? — Stefano Zanetti, Sep 19 '18 at 10:16
I have used the element to get the data-name. Check if it what you want. Regards — Albeis, Sep 19 '18 at 10:33

score 1 · Answer 5 · answered Sep 19 '18 at 09:36

This is achievable using JQuery, but I actually modified your span tag to separate with the currency so that the value is dynamic (however I only tested it with one checkout value)...
Be sure to use parseInt() to retrieve the text in the span tag to make it into number.
Suggest you to ref to this link to have a better concept of this idea.

$(".check-plus").on("change",function(){
var basic = 784;
$(".check-plus").each(function(){
   if(this.checked){
basic += parseInt(this.getAttribute("value"))
name += this.getAttribute("name")+"<br>"
}
})
$(".checkout.rata").text(basic);
$("#plus-display").html(name)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="rata-display-1" class="span text-sottotitolo_dimensione _2 rata checkout">784</span><span class='currency'> €</span>

<br> <br><br>

<div id="plus-display" class="text_piccolo black checkout">PLUS:<strong>place in which display the name of the checkboxes</strong></div>

<br><br><br>

<span id="rata-display-2" class="prezzo-checkout">784 €</span>

<br><br><br>

<form id="plus" name="plus" data-name="plus" class="form-5">
          <div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
          <div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br>‍</strong>+7 € al mese</label></div>
          <div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br>‍</strong>+9 € al mese</label></div>
          <div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br>‍‍</strong>+15 € al mese</label></div>
          <div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br>‍‍</strong>+123 € al mese</label></div>
          <div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br>‍</strong>+4 € al mese</label></div>
          <div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br>‍‍</strong>+45 € al mese</label></div>
          <div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br>‍</strong>+36 € al mese</label></div>
</form>

Display and sum values from selected checkboxes different in divs at the same time

5 Answers5

Generally I would advice different approach: