编程 Javascript

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 兼容鼠标滚轮事件

Apr 07 Javascript

javascript 定义初始化数组函数

Sep 07 Javascript

新手常遇到的一些jquery问题整理

Aug 16 Javascript

关于JS中的闭包浅谈

Aug 23 Javascript

ExtJS实现文件下载的方法实例

Nov 09 Javascript

JavaScript字符串对象substr方法入门实例（用于截取字符串）

Oct 16 Javascript

javascript的tab切换原理与效果实现方法

Jan 10 Javascript

详解Vue2.0之去掉组件click事件的native修饰

Apr 20 Javascript

JavaScript运动框架解决防抖动问题、悬浮对联（二）

May 17 Javascript

angular2 NgModel模块的具体使用方法

Apr 10 Javascript

微信小程序传值以及获取值方法的详解

Apr 29 Javascript

Vue中qs插件的使用详解

Feb 07 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