快捷導(dǎo)航

jQuery實(shí)現(xiàn)購(gòu)物車(chē)多物品數(shù)量的加減+總價(jià)計(jì)算

更新時(shí)間：2014年06月06日 09:41:35 作者：

這篇文章主要介紹了jQuery實(shí)現(xiàn)購(gòu)物車(chē)多物品數(shù)量的加減+總價(jià)計(jì)算,需要的朋友可以參考下

 
<!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實(shí)現(xiàn)購(gòu)物車(chē)多物品數(shù)量的加減+總價(jià)計(jì)算</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.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> 
<span>單價(jià):</span><span class="price">1.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> 
<span>單價(jià):</span><span class="price">3.95</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>總價(jià)：<label id="total"></label></p> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jquery tab插件制作實(shí)現(xiàn)代碼
jquery插件豐富，很多都是很好用的，最近學(xué)習(xí)了一下如何制作jquery插件，發(fā)現(xiàn)jquery插件制作其實(shí)很簡(jiǎn)單，這里介紹一下。
2010-06-06
jquery.masonry瀑布流效果
這篇文章主要為大家詳細(xì)介紹了jquery.masonry瀑布流效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
基于jQuery的動(dòng)態(tài)表格插件
在我的頁(yè)面處理中有時(shí)需要進(jìn)行表單處理，需要一個(gè)用戶可以添加修改多條記錄。
2011-03-03
增強(qiáng)用戶體驗(yàn)友好性之jquery easyui window 窗口關(guān)閉時(shí)的提示
在項(xiàng)目中，客戶提出這么個(gè)要求，就是在關(guān)閉彈出的窗口的時(shí)候，如果點(diǎn)擊紅X 或取消按鈕則提示 ”確認(rèn)保存了當(dāng)前的操作“ 這么個(gè)信息，否則就不提示啦
2012-06-06
jquery制作搜狐快站頁(yè)面效果示例分享
這篇文章主要介紹了jquery制作搜狐快站頁(yè)面效果示例,需要的朋友可以參考下
2014-02-02
javascript 歷史記錄經(jīng)常用于產(chǎn)品最近歷史瀏覽
在很多購(gòu)物網(wǎng)站，都有“產(chǎn)品的瀏覽歷史記錄”，這是個(gè)很貼心的功能。
2009-05-05
jQuery選擇器之基本過(guò)濾選擇器用法實(shí)例分析
這篇文章主要介紹了jQuery選擇器之基本過(guò)濾選擇器用法,結(jié)合實(shí)例形式分析了jQuery常見(jiàn)的基本過(guò)濾、屬性過(guò)濾、內(nèi)容過(guò)濾、子元素過(guò)濾等相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
JQueryEasyUI datagrid框架的進(jìn)階使用
本篇文章小編為大家介紹JQueryEasyUI datagrid框架的基本使用，有需要的朋友可以參考一下
2013-04-04
jQuery隨手筆記之常用的jQuery操作DOM事件
Dom是Document Object Model的縮寫(xiě)，意思是文檔對(duì)象模型。DOM是一種與瀏覽器、平臺(tái)、語(yǔ)言無(wú)關(guān)的接口，使用該接口可以輕松訪問(wèn)頁(yè)面中所有的標(biāo)準(zhǔn)組件，本文給大家介紹jQuery隨手筆記之常用的jQuery操作DOM事件，需要的朋友參考下
2015-11-11
jQuery滿屏焦點(diǎn)圖左右滾動(dòng)特效代碼分享
這篇文章主要介紹了jQuery滿屏焦點(diǎn)圖左右滾動(dòng)特效，一段精致的焦點(diǎn)圖輪播代碼，有需要的小伙伴可以參考下。
2015-09-09