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 的 prototype问题。
Jan 03 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
详解vue的双向绑定原理及实现
May 05 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 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开发大型项目的一点经验
2006/10/09 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
JS自调用匿名函数具体实现
2014/02/11 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Django实现文件上传下载
2019/10/06 Python
python中wx模块的具体使用方法
2020/05/15 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
运动会邀请函范文
2014/01/31 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android