Javascript 带复选框的数学计算

在试图找出如何将复选框的值添加到总数时遇到问题。在我的例子中，我试图将复选框的价格添加到原始成本的价格中。我的函数正确地合计了原始成本的成本。我只是不知道如何将选中的值添加到函数中或创建新的值。提前谢谢

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

---

这将以布尔值（true或false）获取Pepperoni的选中状态：

在JavaScript中，

true

相当于数字1，

false

相当于数字0。假设意大利辣香肠需要额外的一美元，你可以得到这样的价格：

pepp * 1

……或者更简单地说：

pepp

由于每个比萨的配料成本为1美元，因此您可以计算所有比萨的成本（就像您已经做的那样），然后将比萨数量乘以配料成本：

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

• 我给了每个复选框一个值，所以你可以给不同的浇头分配不同的奖品
• 我给了每个topping相同的名称（您也可以给它们相同的类，并使用

  getElementByClassName

  ，或者只是查询所有复选框，但后者意味着您的页面上除了topping之外不能有任何复选框

JS

• 我使用

  getElementByName

  选择了名为

  topping

  的所有元素，并将它们放入一个数组中
• 遍历该数组以查看是否有任何已选中的位置
• 将检查的值相加

完整的解决方案，包括我在此处所做的更改：

函数computeCost（）{
var toppings=document.getElementsByName（“topping”）；
var topping_prize=0；
对于（变量i=0；i

英寸比萨饼
$9.00
中号比萨饼
$11.00
比萨饼
$13.00




意大利 辣味 香肠


香肠


菠萝


培根


蘑菇

当然，为复选框指定一个

值。

RickHitchcock它是我的文本框的Id，总的显示位置。和@Blazemonger，然后添加所有值，不管是否选中。在添加值之前测试

checked

属性。@RickHitchcock完成。理解有困难叮这个。这到底应该做什么？比方说，我选择了1个小的，2个大的，然后检查了意大利香肠，菠萝和培根。结果应该是什么？

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