jquery實現(xiàn)文本框數(shù)量加減功能的例子分享
下面是使用jquery實現(xiàn)的代碼。
效果圖：
源碼：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js數(shù)量加減</title>
<script type="text/javascript" src="http://www.dhdzp.com/Public/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#quantity").keyup(function(){
if(isNaN($(this).val()) || parseInt($(this).val())<1){
$(this).val("1");
$("#totalPrice").html($("#price").val());
return;
}
var total = parseFloat($("#price").val())*parseInt($(this).val());
$("#totalPrice").html(total.toFixed(2));
})
})
/*商品數(shù)量+1*/
function numAdd(){
var num_add = parseInt($("#quantity").val())+1;
if($("#quantity").val()==""){
num_add = 1;
}
$("#quantity").val(num_add);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
/*商品數(shù)量-1*/
function numDec(){
var num_dec = parseInt($("#quantity").val())-1;
if(num_dec<1){
//購買數(shù)量必須大于或等于1
alert("not lt 1");
}else{
$("#quantity").val(num_dec);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
}
</script>
</head>
<body>
<p>Quantity: <span onclick="numDec()">-</span> <input type="text" id="quantity" /> <span onclick="numAdd()">+</span></p>
<p class="sdsd">Total Price: <span id="totalPrice">28.10</span></p>
<input type="hidden" value="28.1" id="price" /><!--單價-->
</body>
</html>
相關(guān)文章
接下來幾篇教程，將重點講解jquery1.4新增的16個方法，有幾個方法還是非常實用的。2010-02-02
Jquery實現(xiàn)遮罩層的簡單實例(就是彈出DIV周圍都灰色不能操作)
下面小編就為大家?guī)硪黄狫query實現(xiàn)遮罩層的簡單實例(就是彈出DIV周圍都灰色不能操作)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了JQuery each()嵌套使用，非常適合初學(xué)者,需要的朋友可以參考下2014-04-04
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實現(xiàn)拖動基本操作
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI，并利用EasyUI實現(xiàn)拖動基本操作，文章并提供了一個學(xué)校課程表簡單實例，感興趣的小伙伴們可以參考一下2015-11-11
jQuery實現(xiàn)新消息閃爍標(biāo)題提示的方法
這篇文章主要介紹了jQuery實現(xiàn)新消息閃爍標(biāo)題提示的方法,實例分析了jQuery操作樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案
這篇文章主要介紹了jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案,需要的朋友可以參考下2018-05-05
jqGrid日期格式的判斷示例代碼(開始日期與結(jié)束日期)
jqGrid日期格式的判斷示例代碼(開始日期與結(jié)束日期)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要內(nèi)容是jQuery無刷新切換主題皮膚實例講解，本文應(yīng)用cookie記錄用戶所選擇設(shè)置的主題皮膚樣式，需要了解的朋友可以參考下2015-10-10
jquery實現(xiàn)的一個簡單進(jìn)度條效果實例
這篇文章主要介紹了jquery實現(xiàn)的一個簡單進(jìn)度條效果實例,很好的一個入門實例,從一個方面介紹了進(jìn)度的實現(xiàn)原理,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件使用的簡單教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08