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>