Méthode Javascript pour réaliser des statistiques de montant en temps réel en cliquant sur la liste des produits checkbox

Méthode Javascript pour réaliser des statistiques de montant en temps réel en cliquant sur la liste des produits checkbox_javascript skills

WBOY

Libérer： 2016-05-16 15:58:51

original

1394 Les gens l'ont consulté

L'exemple de cet article décrit la méthode d'utilisation de JavaScript pour réaliser des statistiques en temps réel du montant en cliquant sur la case à cocher de la liste des produits. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.