选择多个项目时如何更改价格

How do I change a price when multiple items are selected?

本文关键字：何更改 项目 选择      更新时间：2023-09-26

我正在做一个项目（学校），需要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>
  </div>
</div>

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 美元。

有一个

小的JSFiddle问题，我已经评论过了。

除此之外，您还可以使用查询选择器来减少代码。

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>

将函数更改为：

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);
   }
相关文章：