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

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

代码实例如下:

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>

选中商品可以实现自动计算价格总额的功能，下面简单介绍一下它的实现过程。

一.实现原理:

获取ul元素下所有的input元素，然后通过for循环批量为它们注册onclick事件处理函数，此事件处理函数能够遍历所有的复选框，然后对选中的复选框的value属性值进行相加操作。