html购物车输入数量标签,js实现购物车数量增减联动价格变化

如题。

使用js实现一个购物车中常见的功能：购物数量增减功能。

我实现的效果如图：

两边是两个input，中间是一个input输入框。

HTML：

JS：

//根据选择的数量计算总价，并显示出来

function setTotal(){

var t = $("#num");

var tmp = document.getElementById("totalPrice");//需要修改的总价位置1

var tmp1 = document.getElementById("totalPrice1");//需要修改的总价位置2

if(/\D/.test(t.val())){//检查用户输入的值是否是数字

alert("请您输入正确的数量！");

t.val(1);

tmp.innerHTML = "2488元";

tmp1.innerHTML = "2488元";

}

else{//如果输入合法

if(t.val() > 10){

confirm("您真的准备一次购买这么多？");

tmp.innerHTML = t.val()*2488 +"元";

tmp1.innerHTML = t.val()*2488 +"元";

}

}

}

$(function(){ //这里是加减按钮都启用的情况

var t = $("#num");

$("#add").click(function(){

t.val(parseInt(t.val())+1)

setTotal();

})

$("#min").click(function(){

if(t.val()>1){

t.val(parseInt(t.val())-1);

}

else{

alert("至少购买一件哦！");

}

setTotal();

})

});           你可以通过jquery来设置这个插件的某个按钮是否可用。使用的语句如下：其中，我们将中间的输入框置为只读，既不允许通过text文本框对文本进行修改，防止各种非法输入。

$('#add').attr('disabled',"true");