search

Home >Web Front-end >JS Tutorial >Javascript method to realize real-time statistics of amount when clicking on product list checkbox_javascript skills

Javascript method to realize real-time statistics of amount when clicking on product list checkbox_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:58:511396browse

The example in this article describes the method of using JavaScript to realize real-time statistics of the amount by clicking on the checkbox of the product list. Share it with everyone for your reference. The specific implementation method is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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() {
  var chkItems = document.getElementsByName("item");
  for (var i = 0; i < chkItems.length; i++) {
    chkItems[i].checked = event.srcElement.checked;
  }
  calculateMoney();
}
//统计所有选中的产品金额
function calculateMoney() {
  var sum = 0;
  var chkItems = document.getElementsByName("item");
  for (var i = 0; i < chkItems.length; i++) {
    if (chkItems[i].checked) {
      sum += parseInt(chkItems[i].value);
    }
  }
  var sumMoneyObj = document.getElementById("sumMoney");
  sumMoneyObj.innerHTML = "总金额:" + sum;
}

//给每个产品复选框加上自动统计功能
function iniEvent() {
  var chkItems = document.getElementsByName("item");
  for (var i = 0; i < chkItems.length; i++) {
    chkItems[i].onclick = calculateMoney;
  }      
}
</script>
</head>
<body onload="iniEvent()">
<div id="divMain">
<p><input type="checkbox" name="全选" onclick="checkAll()" />全选</p>
<p><input type="checkbox" name="item" value="2999" />&yen;2999 Haier/海尔 KFR-35GW/03GJC12-DS</p>
<p><input type="checkbox" name="item" value="2256" />&yen;2256 天猫年货 AUX/奥克斯 KFR-35GW/SFA+2</p>
<p><input type="checkbox" name="item" value="2799" />&yen;2799 Gree/格力 KFR-26G(26556)FNDe-3</p>
<p><input type="checkbox" name="item" value="2008" />&yen;2008 AUX/奥克斯 KFR-25GW/SFA+2</p>
<p><input type="checkbox" name="item" value="2598" />&yen;2598 Hisense/海信 KFR-35GW/EF11S3</p>
<p><input type="checkbox" name="item" value="1877" />&yen;1877 TCL KFRd-25GW/DE22</p>
<p><input type="checkbox" name="item" value="2398" />&yen;2398 Kelon/科龙 KFR-35GW/EFVCS3</p>
<p><input type="checkbox" name="item" value="1999" />&yen;1999 TCL KFRd-35GW/FC23</p>
<p><input type="checkbox" name="全选" onclick="checkAll()" />全选</p>
<p><span id="sumMoney">总金额:</span></p>
</div>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript method to generate bubbles when the mouse slides over_javascript skillsNext article：JavaScript method to generate bubbles when the mouse slides over_javascript skills

Related articles

See more