javascript - 同时显示和汇总来自 div 中不同的选定复选框的值

Question

我是这里的超级新手，所以这个问题对你来说可能很愚蠢。

我有一个网站，其中显示了一些复选框。这些复选框有一些需要与价格相加的值，它们还有一个需要显示在 div 中的文本。

这是演示网站，如您所见，复选框需要将自己的价格与橙色图片相加（它们有两个不同的divs），然后将值插入到divwith 中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 €&lt;/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 €&lt;/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>‍&lt;/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>‍&lt;/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>‍‍&lt;/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>‍‍&lt;/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>‍&lt;/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>‍‍&lt;/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>‍&lt;/strong>+36 € al mese</label></div>
</form>

标签： javascriptjqueryhtmlcheckbox

Answer 1

纯JS解决方案：

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 
  }
})

这段代码什么时候被解雇？你这里没有任何类型，eventListener你的代码中是否有它？

很高兴知道这个方法是如何被触发的。

一般来说，我会建议不同的方法：

• 将事件侦听器添加到每个复选框（或它们的共同父级，以便您可以利用 eventBubbling - 这是常见的场景）
• 单击时，检查单击的复选框是否为：
  • 选中 - 你应该添加到你的总和
  • 未经检查 - 你应该从你的总和中减去
• 获取复选框旁边的值
• 加/减总和

还请更详细地描述应该发生的事情。前任。单击#someID获取其中的值.someClassName并将其添加/减去到其中的值#someOtherID

Codepen中的粗略草图：

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