简单的javascript制作"；“添加到购物车”；按钮并合计结果

我正在尝试创建一个包含项目a、B、C和D的简单页面。单击每个项目下方的“添加到购物车”时，应显示当前总数。如果单击A和B，则总数应将它们相加。如果A被按下两次，它应该加上

我的问题是如何最好地执行这些按钮，以及Javascript应该随附哪些内容。这些应该是带有“添加到购物车”按钮图像的超链接吗？还是应该是项目

谢谢你的帮助

下面的代码非常适用于复选框…我只想将其修改为使用“添加到购物车”按钮的图像：

函数TotalCheckedValues（）{
var合计=0；
if（document.getElementById（“F2”）.a.checked==true）{total+=parseFloat（document.getElementById（“F2”）.a.value）；}
if（document.getElementById（“F2”）.b.checked==true）{total+=parseFloat（document.getElementById（“F2”）.b.value）；}
if（document.getElementById（“F2”）.c.checked==true）{total+=parseFloat（document.getElementById（“F2”）.c.value）；}
if（document.getElementById（“F2”）.d.checked==true）{total+=parseFloat（document.getElementById（“F2”）.d.value）；}
var ts=新字符串（总计）；
如果（ts.indexOf（'.'）<0）{ts+='.00'；}
如果（ts.indexOf（'.'）==（ts.length-2））{ts+='0'；}
document.getElementById（“F2”）.T.value=ts；
document.getElementById（“F3”）.innerHTML=ts；
}
你想要哪个？

新的（10.00）

断开（自由）

古董（55.00）

翻新（4.95）

总计：

显示您所处理的一些代码，我们可以帮助您调试这些代码或包括最佳实践。。但是你需要展示一些家庭作业，我强烈建议你的购物车不要使用Javascript。让它只与HTML和您在服务器端使用的任何东西一起工作。一旦这一切正常，就可以添加Javascript来平滑一些粗糙的边缘。购物车比看上去要复杂得多。（例如，如果没有服务器双重检查的方式，您的用户可以让您的所有产品只需几枚硬币，然后就可以结账。）您应该将请求提交给服务器，让它将项目排队或出列，并让它返回一个模型响应，其中包括服务器计算的购物车总数。正如@JeremyJStarcher正确指出的那样，cart进程应该优雅地降级，并在必要时在没有Javascript的情况下工作。但是，服务器对购物车的了解应始终推送同步到客户端（包括物品价格、用户身份等），而无需在客户端发出最简单的请求（“将此物品添加到我的队列中，数量为4”）。非常感谢您的提示，虽然我应该再解释一下这个应用程序——这实际上是一个“模拟”购物车，允许向慈善机构捐款的人为特定项目捐款（比如“婴儿床43美元”、“婴儿护理一周75美元”等等），实际上不需要验证。人们不会试图欺骗或诸如此类的事情。对人们来说，这只是一种有趣的、视觉上令人兴奋的捐赠方式。所以那部分不是问题。我正在添加代码（从web上删除），它完全符合我对复选框的要求，是否可以对按钮进行修改？

<script type="text/javascript">
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total +=     parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}

</script>
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" />&nbsp;</form>