为了在激烈的互联网竞争中获得一席之地,都努力使自己的网站更为人性化。比如在购物网站一般都有这样的功能,那就是在结算商品的时候,网站可以自动计算要购买商品所需要花费的金钱数量。
代码实例如下:
010203040506070809101112131415161718192021222324252627282930313233343536373839<!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属性值进行相加操作。