mercredi 19 septembre 2018

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

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(services.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>



Aucun commentaire:

Enregistrer un commentaire