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 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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
15种PHP Encoder的比较
2007/03/06 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP与以太坊交互详解
2018/08/24 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python流程控制语句的深入讲解
2020/06/15 Python
Python __slots__的使用方法
2020/11/15 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
品质主管的岗位职责
2013/12/04 职场文书
后备干部培训方案
2014/05/22 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
管理失职检讨书
2015/05/05 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
浅谈Vue的computed计算属性
2022/03/21 Vue.js