Using jquery to achieve increment and decrement of input values

On many e-commerce websites, where the shopping cart is on the page, when it comes to the number of items, a + sign button and-number button are provided to increase 1 and minus 1, and only input values are allowed. Bootstrap Touchspin This plugin is written for this requirement.

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>

-Control the accuracy and self-decrement of the numerical value

    <br/>
    <div style= "margin-left:10px;" >
        class= "form-horizontal" role= "form" >
            class= "form-group" >
                class= "col-xs-2" >
                    <input id= "demo1" type= "textvalue=""name="demo1class= "form-control"/>
                </div>
            </div>
        </form>
    </div>
    <script type= "text/javascript" >
        $ (function () {
            $ ("input[name= ' demo1 ')". Touchspin ({
                min:0,
                MAX:100,
                step:0.1,//increment or decrement
                Precision
                Boostat:5,
                Maxboostedstep:10,
                Suffix
            });
        });
    </script>

Click the + sign button to increase by 0.1
Click the-Number button to subtract 0.1
2 decimal places reserved
Minimum allowable value 0.00
Maximum allowable value 100.00
Only allow values to be entered, otherwise lose focus show minimum 0.00

-only allow integers starting from 1, which is also a common practice for shopping cart pages

   <div style= "margin-left:10px;" >
        class= "form-horizontal" role= "form" >
            class= "form-group" >
                class= "col-xs-2" >
                    <input id= "demo2" type= "textvalue="1"name="demo2class= " form-control"/>
                </div>
            </div>
        </form>
    </div>
    <script type= "text/javascript" >
        $ (function () {
            $ ("input[name= ' Demo2 ')". Touchspin ({
                Min:1,
                MAX:100,
                Step:1//increment or decrement
            });
        });
    </script>   

Click the + sign button to increase by 1
Click the-Number button to subtract 1
Minimum allowable value 1
Maximum allowable value 100
Only allow values to be entered, otherwise lose focus show minimum 1

For other uses, refer to the documentation.

Using jquery to achieve increment and decrement of input values