方法1-使用value属性来保存成本

通过将价格存储在value属性中，您可以轻松地将其转换为整数并将其添加到总数中：

HTML

<input type="checkbox" name="iMac" id="iMacPC" value="600"> iMacPC </input>
<h3>Add ons</h3>
<input type="checkbox" name="iMac" id="Ram" value="175"> 16 GB RAM (+$175) </input>
<input type="checkbox" name="iMac" id="Harddrive" value="200"> 1 TB HD (+200) </input>
<input type="checkbox" name="iMac" id="Guaranteed" value="150"> Extended Guarantee (+$150) </input>
<input type="checkbox" name="iMac" id="Processor" value="125"> Core i7-4700HQ 2.4 GHz (+$125) </input>

JavaScript

parseInt(iMac[i].value); // the price

然后，您可以使用id属性来保存项目名称：

iMac[i].id; // the item name

有了这个想法，你可以简单地循环所有检查的输入：

var iMac = document.orderForm.iMac; // array of inputs
var totalOrder = "";                // list all checked ids
var totalCost = 0;                  // add values to calculate cost
for (var i = 0; i < iMac.length; i++){
    if (iMac[i].checked) {
        totalOrder += iMac[i].id + " ";       // add ids separated by spaces
        totalCost += parseInt(iMac[i].value); // add value attributes, assuming they are integers
    }
}

以下是完整工作示例的Fiddle

方法2-使用id属性来决定价格

您可以在input的id上使用switch语句来决定价格：

HTML

<input type="checkbox" name="iMac" id="iMacPC" value="iMacPC"> iMacPC </input>
<h3>Add ons</h3>
<input type="checkbox" name="iMac" id="ram" value="Ram"> 16 GB RAM (+$175) </input>
<input type="checkbox" name="iMac" id="harddrive" value="Harddrive"> 1 TB HD (+200) </input>
<input type="checkbox" name="iMac" id="guaranteed" value="Guaranteed"> Extended Guarantee (+$150) </input>
<input type="checkbox" name="iMac" id="processor" value="Processor"> Core i7-4700HQ 2.4 GHz (+$125) </input>

JavaScript

var iMac = document.orderForm.iMac; // array of inputs
var totalOrder = "";                // list all checked item names from value
var totalCost = 0;                  // add values to calculate cost
for (var i = 0; i < iMac.length; i++){
    if (iMac[i].checked) {
        totalOrder += iMac[i].value + " "; // add values separated by spaces for list of item names
        totalCost += getPrice(iMac[i].id); // add value attributes, assuming they are integers
    }
}
function getPrice(id) {
    switch (id) {
        case "iMacPC":
            return 600;
        case "ram":
            return 175;
        case "harddrive":
            return 200;
        case "guaranteed":
            return 150;
        case "processor":
            return 125;
        default:
            return 0;
    }
}

或者，您可以使用2d阵列和for循环：

function getPrice(id) {
    var prices = [
        ["iMacPC", 600],
        ["ram", 175],
        ["harddrive", 200],
        ["guaranteed", 200],
        ["processor", 125]
    ];
    for(var i = 0; i < prices.length; i++) {
        if (id === prices[i][0]) {
            return prices[i][1];
        }
    }
    return 0;
}

以下是使用switch语句的Fiddle

这是一个使用二维数组和for循环的Fiddle

相关提示

提示1-在form上使用action属性

代替使用：

<form>
  <input type="button" onclick="computer();">Button</input>
</form>

您应该使用：

<form action="javascript:computer()">
  <input type="submit">Button</input>
</form>

当用户在关注表单时按下"回车"时，默认行为是通过执行操作提交表单。通过使用action属性和submit类型输入，如果按下"回车"键，您将抓住它。这将给用户一个预期的结果，并避免意外地重新加载页面（在某些情况下可能会发生这种情况）。

提示2-始终使用结束标记

始终关闭标签是个好主意。如果标签没有正确关闭，它可能会不正确地呈现，或者浏览器可能会忽略/删除它。

此行：

<input type="checkbox" name="iMac" value="iMacPC">

最好是：

<input type="checkbox" name="iMac" value="iMacPC"></input>

提示3-不要使用JavaScript计算最终价格

如果您计划实际向用户收费，请确保在服务器端生成账单。如果你使用JavaScript（客户端）的价格，用户可以很容易地将这个数字更改为他/她想要的任何数字，并且可能会抢走你的付款。