例子：购物车价格

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>购物车</title>
 6 </head>
 7 <body>
 8 <h1>购物车</h1>
 9 <input type="checkbox" name="furit" onclick="gouwu(this)" value="10">苹果 10元<br>
10 <input type="checkbox" name="furit" onclick="gouwu(this)" value="20">香蕉 20元<br>
11 <input type="checkbox" name="furit" onclick="gouwu(this)" value="30">西瓜 30元<br>
12 <input type="checkbox" name="furit" onclick="gouwu(this)" value="40">橘子 40元<br>
13 <input type="checkbox" name="furit" onclick="gouwu(this)" value="50">栗子 50元<br>
14 <input type="checkbox" name="furit" onclick="gouwu(this)" value="60">桃子 60元<br>
15 总价格是：<span id="myspan">0元</span>
16 <script type="text/javascript">
17 
18 function gouwu(obj){
19     var furits=document.getElementsByName("furit");
20     var totalPrice=0;
21     //遍历所有的checkbox 计算新的总价
22     for(var i=0;i<furits.length;i++){
23     if(furits[i].checked){
24     totalPrice+=parseFloat(furits[i].value);
25     }
26     }
27     myspan.innerText=totalPrice+"元";
28 }
29 </script>
30 </body>
31 </html>