本文将为点击增加或者减少商品数量并且自动计算总价格相关教程，具体实例代码请看下文:
点击增加或者减少商品数量并且自动计算总价格:
本章节介绍一下如何实现点击按钮来添加或者删除商品的数量，并且能够自动计算商品的总价格。代码实例如下:
织梦者
span{
color:red;
cursor:pointer;
}
$(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));
})
$("#add").click(function(){
numAdd();
});
$("#del").click(function(){
numDec();
});
})
/*商品数量+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));
}
/*商品数量-1*/
function numDec(){
var num_dec = parseInt($("#quantity").val())-1;
if(num_dec<1){
//购买数量必须大于或等于1
alert("not lt 1");
}
else{
$("#quantity").val(num_dec);
var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
$("#totalPrice").html(total.toFixed(2));
}
}
单价：
数量：
-
+
总价格:28
打赏
微信、支付宝、QQ打赏
程序员，你不是一个人；Web开发QQ群：210916599加入QQ群
