1. 程式人生 > >文本框數量加減功能

文本框數量加減功能

nbsp images logs blog num 技術 add .cn total

此功能相當於購物車加減功能:

<p class="_stepper">
  <input class="stepper_input" data-bind="value:orderInfo.PrintNumber,event:{ change: GetPrintNumber}"  type="number" id="printNumber" value="1"/>
  <input type="button" class="up"  data-bind="click:numAdd" value="加" />
  <input type="button"
class="down" data-bind="click:numDec" value="減" /> </p>
//stepper
    //+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) {
            alert("不能小於1");
        } else {
            $("#quantity").val(num_dec);

        }
    }

效果

技術分享

文本框數量加減功能