<!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>
<title>jQuery实现购物车多物品数量的加减+总价计算</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
$(function(){
$(".add").click(function(){
var t=$(this).parent().find('input[class*=text_box]');
t.val(parseInt(t.val())+1)
setTotal();
})
$(".min").click(function(){
var t=$(this).parent().find('input[class*=text_box]');
t.val(parseInt(t.val())-1)
if(parseInt(t.val())<0){
t.val(0);
}
setTotal();
})
function setTotal(){
var s=0;
$("#tab td").each(function(){
s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
});
$("#total").html(s.toFixed(2));
}
setTotal();
 
})
</script>
</head>
<body>
<table id="tab">
<tr>
<td>
<span>单价:</span><span class="price">1.50</span>
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="" type="text" value="1" />
<input class="add" name="" type="button" value="+" />
</td>
</tr>
<tr>
<td>
<span>单价:</span><span class="price">3.95</span>
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="" type="text" value="1" />
<input class="add" name="" type="button" value="+" />
</td>
</tr>
</table>
 
<p>总价：<label id="total"></label></p>
</body>
</html>

jQuery实现购物车多物品数量的加减+总价计算的更多相关文章

  1. jQuery实现购物车多物品数量的加减+总价+删除计算

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  2. JQuery购物车多物品数量的加减+总价计算

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Jquery实现购物车物品数量的加减特效

    今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...

  4. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  5. jquery实现input输入框点击加减数值随之变动

    <input class="addBtn min" type="button" value="-" /><input cl ...

  6. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  7. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

  8. JavaScript 加减危机——为什么会出现这样的结果？

    在日常工作计算中,我们如履薄冰,但是 JavaScript 总能给我们这样那样的 surprise~ 0.1 + 0.2 = ? 1 - 0.9 = ? 如果小伙伴给出内心的结果: 0.1 + 0.2 ...

  9. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

随机推荐

  1. 解决firefox和IE9对icon font字体的跨域访问问题

    何为跨域访问,为什么会有跨域限制?一切还得从浏览器的同源策略说起. 同源策略:是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能会受到影响,可以说Web是构建在同源策略基础 ...

  2. Java多线程系列--“JUC集合”01之 框架

    概要 之前,在"Java 集合系列目录(Category)"中,讲解了Java集合包中的各个类.接下来,将展开对JUC包中的集合进行学习.在学习之前,先温习一下"Java ...

  3. 【web前端面试题整理05】做几道前端面试题休息休息吧

    前言 连续学了两天javascript的东西了,我们都累了,于是今天还是上一套面试题吧,大家一起休息休息,也为下个星期可能会有的面试准备下. 题目一览 CSS1.  overflow-x  属于 CS ...

  4. JS中的原型继承机制

    转载 http://blog.csdn.net/niuyongjie/article/details/4810835 在学习JS的面向对象过程中,一直对constructor与prototype感到很 ...

  5. 开发人员看测试之运行Github中的JBehave项目

    本文要阐述的主要有两点,一是介绍自动化测试框架JBehave,二是介绍如何在Github上拉项目,编译成myeclipse环境中的项目,并最终导入Myeclipse中运行. JBehave是何物? J ...

  6. Javascript: 从prototype漫谈到继承(2)

    本文同时也发表在我另一篇独立博客 <Javascript: 从prototype漫谈到继承(2)>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 上 ...

  7. java nio之SocketChannel

    Java NIO中的SocketChannel是一个连接到TCP网络套接字的通道.可以通过以下2种方式创建SocketChannel: 打开一个SocketChannel并连接到互联网上的某台服务器. ...

  8. 【模式匹配】Aho-Corasick自动机

    1. 多模匹配 AC自动机(Aho-Corasick Automaton)是多模匹配算法的一种.所谓多模匹配,是指在字符串匹配中,模式串有多个.前面所介绍的KMP.BM为单模匹配,即模式串只有一个.假 ...

  9. Elasticsearch Span Query跨度查询

    ES基于Lucene开发,因此也继承了Lucene的一些多样化的查询,比如本篇说的Span Query跨度查询,就是基于Lucene中的SpanTermQuery以及其他的Query封装出的DSL,接 ...

  10. SQL Server - 把星期一(周一)当作每个星期的开始在一年中求取周数

    先感叹一句!好长时间没有更新博客了!偶尔看到一句话,觉得被电击了 - 庸人败于懒,能人败于傲! 因此,不能再懒惰了! 今天想写一个有关计算 Week Number 的函数,刚开始觉得应该很简单,凭着感 ...