How to use jQuery to increment and decrement input values

How to use jQuery to increment and decrement input values_jquery

WBOY

Release： 2016-05-16 16:18:17

Original

1185 people have browsed it

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.

Related labels：

input jquery numerical value method

source：php.cn

Previous article：JQuery selector binding events and methods to modify content_jquery Next article：Some problems in the prototype of Javascript drag and drop (analyzing the code line by line, allowing you to easily understand the principles of drag and drop)_javascript skills

Statement of this Website

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