javascript实现点击商品列表checkbox实时统计金额的方法
本文实例讲述了javascript实现点击商品列表checkbox实时统计金额的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>商品列表统计金额</title>
<styletype="text/css">
body,div,p
{
margin:0;
padding:0;
font-size:14px;
}
#sumMoney
{
font-size:26px;
font-weight:bold;
color:Red;
}
</style>
<scripttype="text/javascript">
//全选和全清
functioncheckAll(){
varchkItems=document.getElementsByName("item");
for(vari=0;i<chkItems.length;i++){
chkItems[i].checked=event.srcElement.checked;
}
calculateMoney();
}
//统计所有选中的产品金额
functioncalculateMoney(){
varsum=0;
varchkItems=document.getElementsByName("item");
for(vari=0;i<chkItems.length;i++){
if(chkItems[i].checked){
sum+=parseInt(chkItems[i].value);
}
}
varsumMoneyObj=document.getElementById("sumMoney");
sumMoneyObj.innerHTML="总金额:"+sum;
}
//给每个产品复选框加上自动统计功能
functioniniEvent(){
varchkItems=document.getElementsByName("item");
for(vari=0;i<chkItems.length;i++){
chkItems[i].onclick=calculateMoney;
}
}
</script>
</head>
<bodyonload="iniEvent()">
<divid="divMain">
<p><inputtype="checkbox"name="全选"onclick="checkAll()"/>全选</p>
<p><inputtype="checkbox"name="item"value="2999"/>¥2999Haier/海尔KFR-35GW/03GJC12-DS</p>
<p><inputtype="checkbox"name="item"value="2256"/>¥2256天猫年货AUX/奥克斯KFR-35GW/SFA+2</p>
<p><inputtype="checkbox"name="item"value="2799"/>¥2799Gree/格力KFR-26G(26556)FNDe-3</p>
<p><inputtype="checkbox"name="item"value="2008"/>¥2008AUX/奥克斯KFR-25GW/SFA+2</p>
<p><inputtype="checkbox"name="item"value="2598"/>¥2598Hisense/海信KFR-35GW/EF11S3</p>
<p><inputtype="checkbox"name="item"value="1877"/>¥1877TCLKFRd-25GW/DE22</p>
<p><inputtype="checkbox"name="item"value="2398"/>¥2398Kelon/科龙KFR-35GW/EFVCS3</p>
<p><inputtype="checkbox"name="item"value="1999"/>¥1999TCLKFRd-35GW/FC23</p>
<p><inputtype="checkbox"name="全选"onclick="checkAll()"/>全选</p>
<p><spanid="sumMoney">总金额:</span></p>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。