js购物车选中商品实现计算商品总价格

最新推荐文章于 2025-05-17 13:38:33 发布

翻译最新推荐文章于 2025-05-17 13:38:33 发布 · 1.5w 阅读

前端js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一个简单的购物车总价计算功能的实现方式。通过JavaScript为每个商品的复选框注册点击事件，当用户选择商品时，可以实时计算已选商品的总价。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了在激烈的互联网竞争中获得一席之地，都努力使自己的网站更为人性化。比如在购物网站一般都有这样的功能，那就是在结算商品的时候，网站可以自动计算要购买商品所需要花费的金钱数量。

代码实例如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>购物车选中商品实现计算商品总价格</title>
<script type="text/javascript"> 
function jisuan(obj){ 
  var total=0; 
  var fruits=document.getElementsByName("fruit"); 
  for (var index = 0; index < fruits.length; index++) {
    if (fruits[index].checked) {
      total += parseFloat(fruits[index].value);
    } 
  } 
  myspan.innerHTML=total+"元"; 
} 
window.onload=function(){
  var obox=document.getElementById("box");
  var inputs=obox.getElementsByTagName("input");
  for (var index = 0; index < inputs.length; index++) {
    inputs[index].onclick = function () {
      jisuan(this)
    }
  }
}
</script>
</head>
<body>
<ul id="box">
  <li><input type="checkbox" name="fruit" value="10"/>商品一 10元</li>
  <li><input type="checkbox" name="fruit" value="20"/>商品二 20元</li>
  <li><input type="checkbox" name="fruit" value="30"/>商品三 30元</li>
  <li><input type="checkbox" name="fruit" value="40"/>商品四 40元</li>
  <li><input type="checkbox" name="fruit" value="50"/>商品五 50元</li>
</ul>
总价格是：<span id="myspan">0元</span>
</body>
</html>