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 捕获窗口关闭事件
Jul 26 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php仿ZOL分页类代码
2008/10/02 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
php实现字符串翻转的方法
2015/03/27 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
pymysql 开启调试模式的实现
2019/09/24 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
python如何查看安装了的模块
2020/06/23 Python
python定义类的简单用法
2020/07/24 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Python多个MP4合成视频的实现方法
2021/07/16 Python