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

谢谢。

Answer 1

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

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

JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: