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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
bootstrap css样式之表单
Jan 19 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
js实现橱窗展示效果
Jan 11 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
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP编码转换
2012/11/05 PHP
深入php数据采集的详解
2013/06/02 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
php异常处理捕获错误整理
2019/09/23 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
Python过滤列表用法实例分析
2016/04/29 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
Python字符串的修改方法实例
2019/12/19 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
读书之星事迹材料
2014/05/12 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
活动费用申请报告
2015/05/15 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs