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>
时间： 2024-10-17 14:58:01