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的作用是什么一章节。

回复

我来回复
  • 暂无回复内容