您的位置：首页 > 其它

实现购物车多物品数量总价计算

2015-04-06 14:37 519 查看

<!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="jquery-1.10.2.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>

<div><img src=03.gif'></div>

<span>单价:</span><span class="price">6.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>

<div><img src='06.gif'></div>

<span>单价:</span><span class="price">9.85</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

实现购物车多物品数量 总价计算

实现购物车多物品数量总价计算