javascript实现点击商品列表checkbox实时统计金额的方法


Posted in Javascript onMay 15, 2015

本文实例讲述了javascript实现点击商品列表checkbox实时统计金额的方法。分享给大家供大家参考。具体实现方法如下:

<!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" />¥2999 Haier/海尔 KFR-35GW/03GJC12-DS</p>
<p><input type="checkbox" name="item" value="2256" />¥2256 天猫年货 AUX/奥克斯 KFR-35GW/SFA+2</p>
<p><input type="checkbox" name="item" value="2799" />¥2799 Gree/格力 KFR-26G(26556)FNDe-3</p>
<p><input type="checkbox" name="item" value="2008" />¥2008 AUX/奥克斯 KFR-25GW/SFA+2</p>
<p><input type="checkbox" name="item" value="2598" />¥2598 Hisense/海信 KFR-35GW/EF11S3</p>
<p><input type="checkbox" name="item" value="1877" />¥1877 TCL KFRd-25GW/DE22</p>
<p><input type="checkbox" name="item" value="2398" />¥2398 Kelon/科龙 KFR-35GW/EFVCS3</p>
<p><input type="checkbox" name="item" value="1999" />¥1999 TCL KFRd-35GW/FC23</p>
<p><input type="checkbox" name="全选" onclick="checkAll()" />全选</p>
<p><span id="sumMoney">总金额:</span></p>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
javascript实现Table排序的方法
May 15 #Javascript
Javascript动态创建表格及删除行列的方法
May 15 #Javascript
javascript制作的滑动图片菜单
May 15 #Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 #Javascript
javascript实现日期按月份加减
May 15 #Javascript
Javascript递归打印Document层次关系实例分析
May 15 #Javascript
Javascript节点关系实例分析
May 15 #Javascript
You might like
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
node.js入门教程
2014/06/01 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python如何对XML 解析
2020/06/28 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
前台接待岗位职责
2013/12/03 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
学生评语大全
2014/04/18 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
教师节主持词开场白
2015/05/29 职场文书
单位更名证明
2015/06/18 职场文书