前端 -- jquery实现input输入框点击加减数值随之变动

jquery实现input输入框点击加减数值随之变动

<input class="addBtn min" type="button" value="-" />
<input class="join-money" type="text" value="1">
<input class="addBtn add" type="button" value="+" />
<span class="total">￥<span class="allMoney">10000</span></span>
<p class="money-tip">（每份金额10000元）</p>

记得引入jq链接

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

js:

 

var t = $(".join-money");
var m = $(".allMoney").text();
var mm = $(".allMoney");
function updateMoney(){
    var tt = t.val();
    var total =  m*tt;   //输入框中的份额数与每份金额数相乘得到总金额
    mm.text(total);
    if(t.val()<=0){
        mm.text(m);
    }
}
$(function(){
$(".add").click(function() {
    t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
    updateMoney();  //显示总金额
});
$(".min").click(function(){
    t.val(parseInt(t.val())-1); //点击减号输入框数值减1
    if(t.val()<=0){
        t.val(parseInt(t.val())+1); //最小值为1
    }
    updateMoney();
});
$(".join-money").keyup(function(){
    var c=$(this);
    if(/[^\d]/.test(c.val())){//替换非数字字符
        var amount=c.val().replace(/[^\d]/g,'');
        $(this).val(amount);
    }
    updateMoney();  //手动输入数值金额随之改变
});
});

给数量设置限制（最小一件，最大5件）

<script>
    var t = $(".t");//声明票数/数量
    $(function () {
        //当我票数框内为1的时候我的减票就不可以使用了
        if (t.val() == 1) {
            document.getElementById("reducenumber").disabled = true;
        }
        //当我票数框内的值为5的时候我就无法再次增加了（这里面的5是后台传过来的变量值）
        if (t.val() == 5 ) {
            document.getElementById("addnumber").disabled = true;
        }
        //点击增加按钮触发函数
        $(".add").click(function () {
            t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
            if (t.val() > 5) {
                //这里5可以是变量
                t.val(parseInt(t.val()) - 1); //最大值为5/（这里面的5是后台传过来的变量值）
            }
            if (t.val() == 5) {
                //当我票数框内的值为5的时候我就无法再次增加了（这里面的5是后台传过来的变量值）
                document.getElementById("addnumber").disabled = true;
            }
            //上面已经禁止点击了减少按钮了，但是我们点击增加之后我们的按钮恢复可点击
            document.getElementById("reducenumber").disabled = false;
            addgroup()//执行增加分组函数
        });

        $(".min").click(function () {
            t.val(parseInt(t.val()) - 1); //点击减号输入框数值减1
            if (t.val() <= 0) {
                t.val(parseInt(t.val()) + 1); //最小值为1
            }
            if(t.val() == 1){
                 //当我票数框内为1的时候我的减票就不可以使用了
                document.getElementById("reducenumber").disabled = true;
            }
             //上面已经禁止点击了增加按钮了，但是我们点击减少之后我们的按钮恢复可点击
            document.getElementById("addnumber").disabled = false;
            reducegroup();//执行减少分组函数
        });
    });
    //以上就是input框增加数字
</script>