选择多个商品时如何更改价格？答案

【问题标题】：How do I change a price when multiple items are selected?选择多个商品时如何更改价格？
【发布时间】：2016-03-03 10:33:37
【问题描述】：

我正在做一个项目（学校），需要 javascript 编程方面的帮助。代码可以看这里：https://jsfiddle.net/zvov1jpr/3/

HTML：

<script src="java.js"></script>
<div id="formular">
<div id="formulartekst">
<form>

  <h2 class="formskrift">Order Hot Food</h2>
  <p class="kroner">$39 / $29 when 3 or more checked</p>
  <input name="product" value="39" type="checkbox" id="p1" onclick="totalIt()" /> Monday
  <br>
  <input name="product" value="39" type="checkbox" id="p2" onclick="totalIt()" /> Tuesday
  <br>
  <input name="product" value="39" type="checkbox" id="p3" onclick="totalIt()" /> Wednesday
  <br>
  <input name="product" value="39" type="checkbox" id="p4" onclick="totalIt()" /> Thursday
  <br>
  <input name="product" value="39" type="checkbox" id="p5" onclick="totalIt()" /> Friday
  <label>
    <br> Total
    <input value="$0.00" readonly type="text" id="total" />
  </label>
  <input type="submit" value="Order">
</form>

Javascript：

function totalIt() {
    var input = document.getElementsByName("product");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
 }
 document.getElementById("total").value = "$" + total.toFixed(2);
}

当我选中复选框时，它会自动增加价格（出于某种原因，它不在 jsfiddle 上，但在我的网站上运行良好）。但是，我需要它，所以当我选中 3 个或更多框时，它必须将价格更改为 29 美元。支票而不是 39 美元。

谢谢。

【问题讨论】：

选择 3 个或更多时，总计必须为每天 29 美元，否则为每天 39 美元。对吗？
而且，该函数将在 jsfiddle 上工作是 window.totalIt= function() 而不是 function totalIt()
查看JSFiddle。它不起作用的原因是，在 JSFiddle 中，有在不同部分加载 JS 的选项。您的代码正在加载。使其加载到体内。在 JSFiddle 中，您会看到 JAVASCRIPT 标签，单击它并将 load Type 更改为 No wrap - in <body>
我已经成功了，谢谢。
我遇到了另一个问题。代码在这里：jsfiddle.net/u0y7aoct 当我选中前 5 个框时，当我选中 3 个或更多时，价格会自行调整。但是，如果我选中以下 5 个框中的任何一个，价格将被覆盖。我需要显示总价格，但现在它们的作用是两个不同的。选择3个或更多的甜点也不应该有折扣。

标签： javascript html calculator shop price

【解决方案1】：

我已经评论了一个 JSFiddle 小问题。

除此之外，您还可以使用 querySelectors 来减少代码。

JSFiddle

function totalIt() {
  var input = document.querySelectorAll("input[name='product']:checked")
  document.getElementById("total").value = "$" +
    (input.length * (input.length > 2 ? 29 : 39))
}

<script src="java.js"></script>
<div id="formular">
  <div id="formulartekst">
    <form>

      <h2 class="formskrift">Order Hot Food</h2>
      <p class="kroner">$39 / $29 when 3 or more checked</p>
      <input name="product" value="39" type="checkbox" id="p1" onclick="totalIt()" />Monday
      <br>
      <input name="product" value="39" type="checkbox" id="p2" onclick="totalIt()" />Tuesday
      <br>
      <input name="product" value="39" type="checkbox" id="p3" onclick="totalIt()" />Wednesday
      <br>
      <input name="product" value="39" type="checkbox" id="p4" onclick="totalIt()" />Thursday
      <br>
      <input name="product" value="39" type="checkbox" id="p5" onclick="totalIt()" />Friday
      <label>
        <br>Total
        <input value="$0.00" readonly type="text" id="total" />
      </label>
      <input type="submit" value="Order">
    </form>
  </div>
</div>

【讨论】：

【解决方案2】：

将您的功能更改为：

function totalIt(){

   var input = document.getElementsByName("product");
   var total = 0;
   for (var i = 0; i < input.length; i++) {
     if (input[i].checked) {
       total+= 1;
     }
   }
   if(total>=3){
   document.getElementById("total").value = "$" + (total*29).toFixed(2);
   }
   else{
   document.getElementById("total").value = "$" + (total*39).toFixed(2);
   }

【讨论】：