Question

我应该如何编写一些代码，以获取所有选定复选框的值，将它们加起来，然后再加上选定大小的值

这是我的html代码。对于Java脚本部分

，我还是有点笨拙

<form name="order_submit" method="post" action="" onSubmit="">
  <h1>My Pizza Cafe</h1>
  <br>


  <h3>Step 2: Select the pizza you want:</h3>

  <input type="radio" name="pizza" value="15">Small
  <input type="radio" name="pizza" value="20">Medium
  <input type="radio" name="pizza" value="25">Large


  <h3>Step 3: Select the topping you want:</h3>
  <input type="checkbox" name="topping" value="5" onclick="onlyOne(this)"> Pepperoni
  <input type="checkbox" name="topping" value="7" onclick="onlyOne(this)"> Sausage
  <input type="checkbox" name="topping" value="5" onclick="onlyOne(this)"> Mushroom <br>
  <input type="checkbox" name="topping" value="4" onclick="onlyOne(this)"> Pineapple
  <input type="checkbox" name="topping" value="4" onclick="onlyOne(this)"> Black Olives
  <input type="checkbox" name="topping" value="7" onclick="onlyOne(this)"> Meatball
  <br><br>

  <input type="submit" name="send" value="Submit Order">
  <input type="reset" value="Clear Entries">

</form>

Answer 1

在这里（使用jQuery）。选中时添加，再次选中时减去。错误处理等由您决定

这是不同解决方案思想的混合：

始终更新当前值（如此处的浇头所示）。当您想显示当前总数时，这很有用
在提交表单时计算总和。然后，您需要遍历所有选中的复选框并汇总它们的值。

let toppingsValue = 0;

$("input[type='checkbox']").change(function() {
  if (this.checked) {
    toppingsValue += parseInt(this.value);
  } else {
    toppingsValue -= parseInt(this.value);
  }
});

$("form").submit(() => {
  const selectedPizza = $("input[name='pizza']:checked");
  const total = toppingsValue + parseInt(selectedPizza.val());
  alert("total: " + total);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="order_submit" method="post" action="">
  <h1>My Pizza Cafe</h1>
  <br>


  <h3>Step 2: Select the pizza you want:</h3>

  <input type="radio" name="pizza" value="15">Small
  <input type="radio" name="pizza" value="20">Medium
  <input type="radio" name="pizza" value="25">Large


  <h3>Step 3: Select the topping you want:</h3>
  <input type="checkbox" name="topping" value="5"> Pepperoni
  <input type="checkbox" name="topping" value="7"> Sausage
  <input type="checkbox" name="topping" value="5"> Mushroom <br>
  <input type="checkbox" name="topping" value="4"> Pineapple
  <input type="checkbox" name="topping" value="4"> Black Olives
  <input type="checkbox" name="topping" value="7"> Meatball
  <br><br>

  <input type="submit" name="send" value="Submit Order">
  <input type="reset" value="Clear Entries">

</form>

如何使用Java脚本计算总价并弹出总价

1 个答案: