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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • python模拟登陆阿里妈妈生成商品推广链接

    淘宝官方有获取商品推广链接的API,但该API属于增值API 普通开发者没有调用权限 需要申请开通 备注:登陆采用的是阿里妈妈账号登陆非淘宝账号登陆 复制代码 代码如下: #coding:utf-8__author__ = 'liukoo'import urllib,urllib2,cookielib,refrom hashlib import md5class alimama:    def __init__(self):        self.header = {'User-Agent':

  • PHP实现采集抓取淘宝网单个商品信息

    调用淘宝的数据可以使用淘宝提供的api,如果只需调用淘宝商品图片名称等公开信息在自己网站上,使用php中的 file_get_contents 函数实现即可. 思路: file_get_contents(url) 该函数根据 url 如 http://www.baidu.com 将该网页内容(源码)以字符串形式输出(一个整字符串),然后配合preg_match,preg_replace等这些正则表达式操作就可以实现获取该url特定div,img等信息了.当然前题是淘宝在单个商品页面的结构是固定的

  • php版淘宝网查询商品接口代码示例

    本文来给大家介绍一个php版淘宝网查询商品接口代码的例子,下面要改成你的信息的在代码后面都有说明了,同时sdk包我们也要官方下载. 下载SDK后直接引用包,并创建如下的类,并运行之,即完成了调用接口(taobao.user.seller.get)的过程(调用接口说明可见下载的SDK)说明:    TopClient为调用SDK的实例化类    UserSellerGetRequest为API的请求参数封装类 注:该接口是在沙箱环境下调用,获取的数据,也是沙箱中数据.若要获取线上环境,请填写自己创

  • python根据京东商品url获取产品价格

    京东商品详细的请求处理,是先显示html,然后再ajax请求处理显示价格. 1.可以运行js,并解析之后得到的html 2.模拟js请求,得到价格 # -*- coding: utf-8 -*- """ 根据京东url地址,获取商品价格 京东请求处理过程,先显示html页面,然后通过ajax get请求获取相应的商品价格 1.商品的具体数据在html中的格式,如下(示例) # product: { # skuid: 1310118868, # name: '\u9999\u5

  • php实现的简单美国商品税计算函数

    本文实例讲述了php实现的简单美国商品税计算函数.分享给大家供大家参考.具体如下: <?php function tax($total,$tax_amount){ $tax_rate = $tax_amount * .01; $tax = $total * $tax_rate; return $value = $tax + $total; } $price = 50.00; //In U.S. Dollars $taxrate = 6.5; //In percentage echo "$&

  • 利用Python的Flask框架来构建一个简单的数字商品支付解决方案

    利用Python的Flask框架来构建一个简单的数字商品支付解决方案

    作为一个程序员,我有时候忘了自己所具有的能力.当事情没有按照你想要的方式发展时,却很容易忘记你有能力去改变它.昨天,我意识到,我已经对我所出售的书的付款处理方式感到忍无可忍了.我的书完成后,我使用了三个不同的数字商品支付处理器,在对它们三个都感到不满后,我用Python和Flask,两个小时的时间写出了我自己的解决方案.没错!两个小时!现在,这个系统支撑着我的书籍付费流程,整个过程难以置信的简单,你可以在20秒内购买书籍并开始阅读. 往下看,看我是如何在一夜之间完成我自己的数字商品支付解决方案的

  • jQuery 浮动导航菜单适合购物商品类型的网站

    jQuery 浮动导航菜单适合购物商品类型的网站

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单通过锚点实现: 2.滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了: 计算 scrollTop 和 各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式.比如第二个 div 的 off

  • python抓取京东价格分析京东商品价格走势

    复制代码 代码如下: from creepy import Crawlerfrom BeautifulSoup import BeautifulSoupimport urllib2import json class MyCrawler(Crawler):    def process_document(self, doc):        if doc.status == 200:            print '[%d] %s' % (doc.status, doc.url)       

  • JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)

    购物车点击可以减少或者添加商品并自动计算价格: 购物车中可能有这样的功能,那就是点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格,下面就通过代码实例介绍一下如何实现此功能,当然下面的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

  • jquery实现商品拖动选择效果代码(自写)

    jquery实现商品拖动选择效果代码(自写)

    效果图如下:  主页面index.html: 复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Drag and drop</title> <link rel="stylesheet" href="main.css"> <sc

  • php商品对比功能代码分享

    php商品对比功能代码分享

    下面是自己亲自动手编写的代码,和大家一起学习研究. 商品对比调用的JS文件(包含了商品对比框浮动JS): /*浮动窗口*/ (function(){ var n=10; var obj=document.getElementById("goods-compare"); if(!obj){ return false; } var x=0; window.onscroll=function(){ obj.style.top=(document.body.scrollTop||documen

  • 类似天猫商品详情随浏览器移动的示例代码

    使用该函数,必须集成于jquery包 原理:当浏览器移动到某个指定位置时,该图层上浮,然后加入一个样式,让该div层定位于浏览器顶部 复制代码 代码如下: //控制头部购物车的显示 function fixshow(min_height){ min_height ? min_height = min_height : min_height = 830; $(window).scroll(function(){ var s = $(window).scrollTop(); if( s > min_

随机推荐