jQuery实现购物车多物品数量的加减+总价计算

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