【发布时间】:2018-09-19 09:04:51
【问题描述】:
我是新来的,所以这个问题对你来说可能很愚蠢。
我有一个网站,其中显示了一些复选框。这些复选框有一些需要与价格相加的值,它们还有一个需要在 div 中显示的文本。
Here's the demo website,如您所见,复选框需要将自己的价格与橙色图片相加(它们有两个不同的divs),然后将值插入div 和id=plus-display。
目前我猜到了这个解决方案,但它根本不起作用。
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>
【问题讨论】:
-
services 是存储名称的数组?
-
对不起,我的错误..我已经编辑了这个问题..这不是服务,而是加..我想将来自
id=plus的数据与id=plus-display合并到div中 -
.join不会对数组中的值求和,它只会以,作为分隔符将它们连接起来。这是你想要的吗? -
如果你想求和,你可以使用
reduce数组方法。 developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/… -
是的,它是正确的.. 我想在
div和id=plus-display中加入他们的名字,然后,同时,我想将复选框的值与两个 div 相加与id=rata-display-1和id=rata-display-1。
标签: javascript jquery html checkbox