js选中checkbox复选框既可以实现商品价格计算
本章节分享一段代码实例，它模拟实现了类似于商城计算商品价格综合的功能。
当选中或者取消选中复选框的时候，能够实现商品价格计算功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
body,div,p{
margin:0;
padding:0;
font-size:14px;
}
#sumMoney{
font-size:26px;
font-weight:bold;
color:Red;
}
</style>
<script type="text/javascript">
//全选和全清
function checkAll(ev){
var chkItems=document.getElementsByName("item");
var target=ev.srcElement||ev.target;
for(var index=0;index<chkItems.length;index++){
chkItems[index].checked=target.checked;
}
calculateMoney();
}
//统计所有选中的产品金额
function calculateMoney(){
var sum=0;
var chkItems=document.getElementsByName("item");
for(var index=0;index<chkItems.length;index++){
if(chkItems[index].checked){
sum+=parseInt(chkItems[index].value);
}
}
var sumMoneyObj=document.getElementById("sumMoney");
sumMoneyObj.innerHTML="总金额:"+sum;
}
//给每个产品复选框加上自动统计功能
function iniEvent(){
var chkItems=document.getElementsByName("item");
for (var index=0;index<chkItems.length;index++){
chkItems[index].onclick=calculateMoney;
}
}
window.onload=function(){
iniEvent();
var chkAll=document.getElementById("chkAll");
chkAll.onclick=function(ev){
var ev=window.event||ev;
checkAll(ev);
}
}
</script>
</head>
<body>
<div id="divMain">
<p><input type="checkbox" id="chkAll" name="全选"/>全选</p>
<p><input type="checkbox" name="item" value="2999" />div css教程</p>
<p><input type="checkbox" name="item" value="2256" />javascript教程</p>
<p><input type="checkbox" name="item" value="2799" />jquery教程</p>
<p><input type="checkbox" name="item" value="2008" />正则表达式教程</p>
<p><input type="checkbox" name="item" value="2598" />nodejs教程</p>
<p><input type="checkbox" name="item" value="1877" />HTML5教程</p>
<p><input type="checkbox" name="item" value="2398" />ajax教程</p>
<p><input type="checkbox" name="item" value="1999" />前端教程网</p>
<p><span id="sumMoney">总金额:</span></p>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.function checkAll(ev){}，此函数实现了复选框的全选和全部选效果，参数是事件对象。
（2）.var chkItems=document.getElementsByName("item")，获取name属性值为item的元素对象集合。
（3）.var target=ev.srcElement||ev.target，获取事件源对象，其实在这里就是最顶部的那个复选框。
（4）.for(var index=0;index<chkItems.length;index++){
chkItems[index].checked=target.checked;
}，通过for循环遍历每一个元素，并且复选框的checked属性值设置为最顶部的复选框的checked属性值。
（5）.calculateMoney(){},此函数实现计算金钱总额的功能。
（6）.var sum=0，声明一个变量并赋初值为0，用来存储总金钱数。
（7）.var chkItems=document.getElementsByName("item")，获取name属性值为item的元素集合。
（8）.for(var index=0;index<chkItems.length;index++){
if(chkItems[index].checked){
sum+=parseInt(chkItems[index].value);
}
}，遍历集合中的每一个元素。
判断集合中的元素哪一个是被选中的，如果被选中就将金额数累加。
（9）.var sumMoneyObj=document.getElementById("sumMoney")，获取指定的元素对象。
（10）.sumMoneyObj.innerHTML="总金额:"+sum，显示金额数。
（11）.function iniEvent(){}，进行一些初始化操作，比如事件处理函数的注册。
（12）.for (var index=0;index<chkItems.length;index++){
chkItems[index].onclick=calculateMoney;
} ，批量注册事件处理函数。
二.相关阅读:
（1）.document.getElementsByName()可以参阅document.getElementsByName()方法一章节。
（2）.srcElement属性可以参阅javascript event.srcElement一章节。
（3）.target属性可以参阅javascript event.target一章节。
（4）.parseInt()方法可以参阅javascript parseInt()一章节。
（5）.window.event||ev可以参阅var ev=window.event||ev的作用是什么一章节。