How to use jQuery to increment and decrement input values_jquery

The example in this article describes how to use jQuery to implement increment and decrement of input values. Share it with everyone for your reference. The specific analysis is as follows:

In many e-commerce websites, when it comes to the quantity of goods on the page where the shopping cart is located, a button and - button will be provided to increase and decrease by 1, and only allow numerical values ​​to be entered in the input. The Bootstrap TouchSpin plug-in is written to meet this need. (Click here to download the Bootstrap TouchSpin plug-in from this site .)

First introduce the necessary css and js files.

Copy code The code is as follows:

1. Control the accuracy and automatic increment and decrement of numerical values ​​

Copy code The code is as follows:

         

                                  

                                                                                                                                                                                                
                                                                                                                                                                                                                                                                         

● Click the number button to increase it by 0.1 ● Click the - button to decrease the value by 0.1

● Keep 2 decimal places

● Minimum allowed value 0.00
● Maximum allowed value 100.00
● Only numerical values ​​are allowed to be entered, otherwise the focus will be lost and the minimum value will be displayed as 0.00


2. Only integers starting from 1 are allowed, which is also a common practice on shopping cart pages

Copy code The code is as follows:

         

                                  

                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                         

● Click the number button to increase it by 1 ● Click the - button to decrement it by 1

● Minimum allowed value 1

● Maximum allowed value 100
● Only numerical values ​​are allowed to be entered, otherwise the focus will be lost and the minimum value 1 will be displayed

As for other usages, interested friends can refer to relevant documents.

I hope this article will be helpful to everyone’s jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQuery selector binding events and methods to modify content_jqueryNext article：JQuery selector binding events and methods to modify content_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills