你的位置:首页 > Java教程

[Java教程]js实现的购物车选中商品实现计算商品总价格


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

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript"> function jisuan(obj){  var total=0;  var fruits=document.getElementsByName("fruit");  for(var i=0;i<fruits.length;i++){   if(fruits[i].checked){    total += parseFloat(fruits[i].value);   }  }  myspan.innerHTML=total+"元"; } window.onload=function(){ var obox=document.getElementById("box"); var inputs=obox.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){  inputs[i].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属性值进行相加操作。
二.相关阅读:
1.document.getElementsByName()函数可以参阅getElementsByName()方法的用法一章节。 
2.checked属性可以参阅javascript的checkbox.checked属性一章节。 
3.parseFloat()函数可以参阅javascript的parseFloat()方法一章节。
4.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
5.getElementsByTagName()函数可以参阅javascript的document.getElementsByTagName()一章节。
6.this可以参阅JavaScript的this用法详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11877

更多内容可以参阅:http://www.softwhy.com/javascript/