带复选框的数学计算

Math Computation with Checked Boxes

本文关键字：计算 复选框      更新时间：2023-09-26

在尝试弄清楚如何将复选框的值添加到总计时遇到问题。就我而言，我正在尝试将复选框的价格添加到原始成本的价格中。我的函数正确计算了原始成本的成本，我只是不确定如何将选中的值添加到函数中或创建一个新值。提前谢谢。

    <tr>
      <th> Small Pizza </th>
      <td> $9.00 </td>
      <td> <input type = "text"  name = "smal" id = "small"  
                  size ="2" /> </td>
    </tr>
    <tr>
      <th> Medium Pizza </th>
      <td> $11.00 </td>
      <td> <input type = "text"  name = "medium" id = "medium"  
            size = "2" /> </td>
    </tr> 
    <tr>
      <th> Large Pizza </th>
      <td> $13.00 </td>
      <td> <input type = "text"  name = "large" id = "large"  
            size = "2"  /></td>
    </tr>
  </table>
    <br><br>
    <!-- Each topping is only to be $1 extra -->
    <input type ="checkbox" name = "pepp" id ="pepp" > Pepperoni <br>
    <input type ="checkbox" name = "sausage" id ="sausage" > Sausage <br>
    <input type ="checkbox" name = "pineapple" id ="pineapple" > Pineapple <br>
    <input type ="checkbox" name = "bacon" id ="bacon" > Bacon<br>
    <input type ="checkbox" name = "mushroom" id ="mushroom" > Mushroom <br>
     <p>
    <input type = "button"  value = "Total Cost" 
           onclick ="computeCost();" />
    <input type = "text"  size = "5"  id = "txtCost" 
           name = "txtCost" onfocus ="this.blur();" />
  </p>

还有我的JavaScript函数

    function computeCost()
     {
var small = document.getElementById("small").value;
small = Number(small);
var medium = document.getElementById("medium").value;
medium = Number(medium);
var large = document.getElementById("large").value;
large = Number(large);
document.getElementById("txtCost").value = small*9 + medium*11 + large*13;
}

这将获得意大利辣香肠作为布尔值的检查状态（真或假）：

var pepp = document.getElementById("pepp").checked

在 JavaScript 中，true 相当于数字 1，false 相当于数字 0。 假设意大利辣香肠的成本要高出一美元，你可以得到这样的成本：

pepp * 1

或者更简单地说：

pepp
由于每个披萨的浇头

成本为一美元，因此您可以计算所有披萨的成本（就像您已经完成的那样），然后将比萨饼的数量乘以浇头的成本相加：

var pepp  = document.getElementById("pepp").checked,
    saus  = document.getElementById("sausage").checked,
    pine  = document.getElementById("pineapple").checked,
    bacon = document.getElementById("bacon").checked,
    mush  = document.getElementById("mushroom").checked;
document.getElementById("txtCost").value = 
  (small*9 + medium*11 + large*13) +
  (small + medium + large) * (pepp + saus + pine + bacon + mush);

工作小提琴

根据您的示例，我进行了以下更改：

.HTML

  • 我给每个复选框一个值，这样您就可以为不同的浇头分配不同的奖品
  • 我给每个浇头都起了相同的名称（你也可以给它们相同的类并使用getElementByClassName代替，或者只是查询所有复选框，但后者意味着除了浇头的复选框之外，你的页面上不能有任何复选框。

.JS

  • 我使用 getElementByName 选择了所有名为 topping 的元素，并将它们放入数组中。
  • 遍历该数组以查看是否有任何检查
  • 将检查的值相加。

完整的解决方案，我的更改在这里：

function computeCost() {
  var toppings = document.getElementsByName("topping");
  var topping_prize = 0;
  for (var i = 0; i < toppings.length; i++) {
    if (toppings[i].checked) {
      topping_prize += Number(toppings[i].value);
    }
  }
  var small = document.getElementById("small").value;
  small = Number(small);
  var medium = document.getElementById("medium").value;
  medium = Number(medium);
  var large = document.getElementById("large").value;
  large = Number(large);
  document.getElementById("txtCost").value = small * 9 + medium * 11 + large * 13 + topping_prize;
}
<table>
  <tr>
    <th>Small Pizza</th>
    <td>$9.00</td>
    <td>
      <input type="text" name="smal" id="small" size="2" />
    </td>
  </tr>
  <tr>
    <th>Medium Pizza</th>
    <td>$11.00</td>
    <td>
      <input type="text" name="medium" id="medium" size="2" />
    </td>
  </tr>
  <tr>
    <th>Large Pizza</th>
    <td>$13.00</td>
    <td>
      <input type="text" name="large" id="large" size="2" />
    </td>
  </tr>
</table>
<br>
<br>
<input type="checkbox" name="topping" id="pepp" value="1">Pepperoni
<br>
<input type="checkbox" name="topping" id="sausage" value="1">Sausage
<br>
<input type="checkbox" name="topping" id="pineapple" value="1">Pineapple
<br>
<input type="checkbox" name="topping" id="bacon" value="1">Bacon
<br>
<input type="checkbox" name="topping" id="mushroom" value="1">Mushroom
<br>
<p>
  <input type="button" value="Total Cost" onclick="computeCost();" />
  <input type="text" size="5" id="txtCost" name="txtCost" onfocus="this.blur();" />
</p>

相关文章：