Question

我有某种电子商务，在结帐页面中显示价格。

在同一页面中，我有一些“服务”可添加到最终价格中，并带有复选框。

现在，我希望当我单击一个复选框时，价格将被总和更新。

类似这样的情况：“价格” +“服务_1” +“服务_2” =总价格

并且我希望服务将在其他div中动态显示

我的问题是我不知道如何更新价格并将其显示在没有提交按钮的div中。

<form id="services" name="services-form" data-name="services Form">
  <div class="checkbox-field w-checkbox"><input type="checkbox" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="checkbox" class="simple-text white w-form-label">design pack</label>22500 €</div>
  <div class="checkbox-field ew w-checkbox"><input type="checkbox" id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="checkbox-2" class="simple-text white w-form-label">security</label>2000 €</div>
  <div class="checkbox-field 2 w-checkbox"><input type="checkbox" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="checkbox-3" class="simple-text white w-form-label">wellness pack</label>5000 €</div>
  <div class="checkbox-field 4 w-checkbox"><input type="checkbox" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="checkbox-3" class="simple-text white w-form-label">box auto</label>1000 €</div>
</form>

<div class="paragraph" id="price">
  <?php echo $price;?> €</div>
<div id="display_services" class="simple-text maiusc prova">services:<br>design pack<br>dynamically adding the services...</div>

Answer 1

将值添加到复选框-还要确保您的ID是正确的，并且for =“ ID”与复选框匹配。您有一些不一致的地方-例如，每个标签的“ for”都错误，您需要使用<label for="someId"

var serverPrice = parseInt(document.getElementById("price").innerText); // initial price
var checks = document.querySelectorAll("input[id^=service]"); // all id="service..." boxes
for (var i=0;i<checks.length;i++) {
  checks[i].onclick=function() {
    var services = [], total = 0;
    for (var i=0;i<checks.length;i++) { // again we loop
      if (checks[i].checked) { // a ternary is no longer useful
        total += +checks[i].value;
        services.push(document.querySelector("[for="+checks[i].id+"]").innerHTML); // get the label text
      }
    }
    document.getElementById("price").innerText=(serverPrice+total)+"€";
    document.getElementById("display_services").innerHTML="services: "+services.join(", ");
  }
}

<form id="services" name="services-form" data-name="services Form">
  <div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
  <div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
  <div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
  <div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>

<div class="paragraph" id="price">
  200 €</div>
<div id="display_services" class="simple-text maiusc prova">services:<br>design pack<br>dynamically adding the services...</div>

Answer 2

您可以使用Ajax。 AJAX的主要功能是它使网页速度更快，ajax允许仅重新加载网页的重要部分而不是完整的网站或网页。

提交和显示复选框值而无需提交按钮

2 个答案: