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_05_原型继承原理
Oct 13 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
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
ThinkPHP中redirect用法分析
2014/12/05 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
深入理解Vue router的部分高级用法
2018/08/15 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
centos7之Python3.74安装教程
2019/08/15 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
社区工作者先进事迹
2014/01/18 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
给孩子的新年寄语
2014/04/08 职场文书
实习协议书范本
2014/04/22 职场文书
班级活动总结格式
2014/08/30 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
python字符串的一些常见实用操作
2022/04/06 Python