基於jquery的一款代碼，實現購物車數據的加減，在淘寶網、京東商城購物時時經常見到的一個功能，點擊文本框兩側的“+”與“-”，就可以增加或減少文本框內的數字值，每次步長為1，當然這個是可以自己設置的。本款效果除了加減功能外，還可以自動計算價格。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery實現購物車物品數量的加減</title> 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 7 <script> 8 $(function(){ 9 var t = $("#text_box"); 10 $("#add").click(function(){ 11 t.val(parseInt(t.val())+1) 12 setTotal(); 13 }) 14 $("#min").click(function(){ 15 t.val(parseInt(t.val())-1) 16 setTotal(); 17 }) 18 function setTotal(){ 19 $("#total").html((parseInt(t.val())*3.95).toFixed(2)); 20 } 21 setTotal(); 22 }) 23 </script> 24 </head> 25 <body> 26 <p>單價：3.95</p> 27 <input id="min" name="" type="button" value="-" /> 28 <input id="text_box" name="" type="text" value="4" /> 29 <input id="add" name="" type="button" value="+" /> 30 <p>總價：<label id="total"></label></p> 31 </body> 32 </html>