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


Posted in Javascript onJune 06, 2014
<!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>
Javascript 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 #Javascript
按钮接受回车事件的三种实现方法
Jun 06 #Javascript
jquery统计用户选中的复选框的个数
Jun 06 #Javascript
javascript中的throttle和debounce浅析
Jun 06 #Javascript
单击某一段文字改写文本颜色
Jun 06 #Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 #Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 #Javascript
You might like
Laravel实现用户注册和登录
2015/01/23 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
python使用matplotlib绘制柱状图教程
2017/02/08 Python
对numpy中shape的深入理解
2018/06/15 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
合伙经营协议书
2014/04/18 职场文书
管理建议书范文
2014/05/13 职场文书
关于运动会的口号
2014/06/07 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
python双向链表实例详解
2022/05/25 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript