1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>jQuery实现购物车多物品数量的加减+总价计算</title>
4 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
5 <script>
6 $(function(){
7 $(".add").click(function(){
8 var t=$(this).parent().find('input[class*=text_box]');
9 t.val(parseInt(t.val())+1)
10 setTotal();
11 })
12 $(".min").click(function(){
13 var t=$(this).parent().find('input[class*=text_box]');
14 t.val(parseInt(t.val())-1)
15 if(parseInt(t.val())<0){
16 t.val(0);
17 }
18 setTotal();
19 })
20 function setTotal(){
21 var s=0;
22 $("#tab td").each(function(){
23 s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
24 });
25 $("#total").html(s.toFixed(2));
26 }
27 setTotal();
28
29 })
30 </script>
31 </head>
32 <body>
33 <table id="tab">
34 <tr>
35 <td>
36 <span>单价:</span><span class="price">1.50</span>
37 <input class="min" name="" type="button" value="-" />
38 <input class="text_box" name="" type="text" value="1" />
39 <input class="add" name="" type="button" value="+" />
40 </td>
41 </tr>
42 <tr>
43 <td>
44 <span>单价:</span><span class="price">3.95</span>
45 <input class="min" name="" type="button" value="-" />
46 <input class="text_box" name="" type="text" value="1" />
47 <input class="add" name="" type="button" value="+" />
48 </td>
49 </tr>
50 </table>
51
52 <p>总价：<label id="total"></label></p>
53 </body>
54 </html>
