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

Question

我正在做一个项目（学校），需要 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"> /  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="[=10=].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 pr。检查而不是 39 美元。

谢谢。

Answer 1

将您的函数更改为：

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

Answer 2

我已经评论过一个小的 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"> /  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="[=11=].00" readonly type="text" id="total" />
      </label>
      <input type="submit" value="Order">
    </form>
  </div>
</div>

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

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

html

javascript

calculator

shop

price