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
– Stefano Zanetti, Commented Sep 19, 2018 at 9:17
.join will not sum values in array, it will just join them with , as separator. Is this what you want? — azrahel
– azrahel, Commented Sep 19, 2018 at 9:23
if you want it summed, you can use reduce array method. developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/… — azrahel
– azrahel, Commented Sep 19, 2018 at 9: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
– Stefano Zanetti, Commented Sep 19, 2018 at 9:27

Pranbir Sarkar · Accepted Answer · 2018-09-19 09:44:37Z

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(", "));
Yes It is possible... jsfiddle.net/jub19tav/16 Please look at this code..

azrahel · Accepted Answer · 2018-09-19 09:46:39Z

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

Albeis · Accepted Answer · 2018-09-19 12:37:30Z

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)); ??
I have used the element to get the data-name. Check if it what you want. Regards

gitguddoge · Accepted Answer · 2018-09-19 09:36:23Z

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>

Christer · Accepted Answer · 2018-09-19 11:09:27Z

1

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! :)

edited Sep 19, 2018 at 11:09

answered Sep 19, 2018 at 9:17

Christer

1,6811 gold badge17 silver badges36 bronze badges

1 Comment

Christer Over a year ago

Looking at it, you can also remove the div[class^=plus-] from the selector if you want to.

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

Generally I would advice different approach:

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Generally I would advice different approach:

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related