手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现购物车多物品数量的加减+总价计算
jQuery实现购物车多物品数量的加减+总价计算
摘要:复制代码代码如下:jQuery实现购物车多物品数量的加减+总价计算$(function(){$(".add").click(function...

复制代码 代码如下:

<!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>1.50</span>

<input name="" type="button" value="-" />

<input name="" type="text" value="1" />

<input name="" type="button" value="+" />

</td>

</tr>

<tr>

<td>

<span>单价:</span><span>3.95</span>

<input name="" type="button" value="-" />

<input name="" type="text" value="1" />

<input name="" type="button" value="+" />

</td>

</tr>

</table>

<p>总价:<label id="total"></label></p>

</body>

</html>

【jQuery实现购物车多物品数量的加减+总价计算】相关文章:

jQuery实现页面内锚点平滑跳转特效的方法总结

js实现简单锁屏功能实例

Jquery实现动态切换图片的方法

jQuery实现在列表的首行添加数据

javascript实现动态改变层大小的方法

js实现发送验证码后的倒计时功能

网页里控制图片大小的相关代码

jquery插件validation实现验证身份证号等

javascript实现删除前弹出确认框

JQuery实现带排序功能的权限选择实例

精品推荐
分类导航