How to use jQuery to increment and decrement input values-JS Tutorial-php.cn

How to use jQuery to increment and decrement input values

韦小宝

Release： 2017-11-28 10:21:09

Original

2771 people have browsed it

Use jQuery to realize the method of increment and decrement of input value. In many e-commerce websites, when it comes to the quantity of goods on the page where the shopping cart is located, it will be provided A + button and a - button are used to increase and decrease by 1, and only allow numerical values to be entered in the input. At this time, jQuery is needed to implement , is accompanied by jQuerySource code~

First introduce the necessary css and js files.

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="Scripts/jquery.bootstrap-touchspin.min.js"></script>

Copy after login

## 1. Control the accuracy and auto-increment and auto-decrement of numerical values

<br />
<div style="margin-left: 10px;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-xs-2">
                    <input id="demo1" type="text" value="55" name="demo1" class="form-control" />
                </div>
            </div>
        </form>
</div>
<script type="text/javascript">
        $(function () {
            $("input[name=&#39;demo1&#39;]").TouchSpin({
                min: 0,
                max: 100,
                step: 0.1,//增量或减量
                decimals: 2, //精度
                boostat: 5,
                maxboostedstep: 10,
                postfix: &#39;%&#39; //后缀
            });
        });
</script>

Copy after login

● Click the + button to increment by 0.1● Click the - button to decrement by 0.1
● Keep 2 decimal places
● The minimum allowed value is 0.00
● The maximum allowed value 100.00
● Only numerical values are allowed to be entered, otherwise the focus is lost and the minimum value is displayed 0.00

2. Only integers starting from 1 are allowed, this is also the shopping cart page Commonly used methods

<div style="margin-left: 10px;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-xs-2">
                    <input id="demo2" type="text" value="1" name="demo2" class="form-control" />
                </div>
            </div>
        </form>
</div>
<script type="text/javascript">
        $(function () {
            $("input[name=&#39;demo2&#39;]").TouchSpin({
                min: 1,
                max: 100,
                step: 1//增量或减量
            });
        });
</script>

Copy after login

● Click the + button to increase it by 1● Click the - button to decrement it by 1
● The minimum allowed value is 1
● The maximum allowed value is 100
● Only numerical values are allowed to be entered, otherwise the focus is lost and the minimum value is displayed 1

The above is all the content of the method of using jQuery to implement increment and decrement of input values. If you want to know more, please search on

PHP中文网~

Related recommendations:

# #jquery One-click method to control checkbox selection, inverse selection, and no selection at all

What is the difference between JS and JQUERY

How Use jQuery to achieve the magnifying glass effect

The above is the detailed content of How to use jQuery to increment and decrement input values. For more information, please follow other related articles on the PHP Chinese website!