js实现的购物车选中商品实现计算商品总价格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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/
以上是关于js实现的购物车选中商品实现计算商品总价格的主要内容，如果未能解决你的问题，请参考以下文章