How to implement the increase and decrease functions of input box numbers in jquery

In web development, the number increasing and decreasing functions of input boxes are often used, such as the number of shopping carts, the number of products, etc. This article will introduce how to use jquery to increase and decrease the number of the input box.

Code implementation:

First, you need to introduce the jquery library file:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

Then, add an input box and two buttons for increasing and decreasing numbers.

<input type="text" id="input_num" value="1" />
<button id="btn_reduce">-</button>
<button id="btn_add">+</button>

Then, in the Javascript code, we can get the input box and button elements defined above through the jquery selector and add event listeners.

$(function() {
  var inputNum = $('#input_num');
  var btnAdd = $('#btn_add');
  var btnReduce = $('#btn_reduce');
  
  // 增加数字
  btnAdd.on('click', function() {
    var num = parseInt(inputNum.val());
    inputNum.val(num + 1);
  });
  
  // 减少数字
  btnReduce.on('click', function() {
    var num = parseInt(inputNum.val());
    if(num > 1) {
      inputNum.val(num - 1);
    }
  });
});

Code analysis:

First, we use the jquery selector to get the input box and button elements and save them to variables.

Next, we add a click event listener to listen for button click events.

In the button click event, we use the val() method to get the value in the input box and convert it to an integer type through the parseInt() method.

In the click event of the add button, we increase its value by 1 and use the val() method to pass the new value to the input box.

In the click event of the reduce button, we first determine whether the value of the input box is greater than 1, and if so, reduce its value by 1.

Summary:

Through the above code implementation, we can implement a simple function of increasing and decreasing input box numbers. In addition, we can also implement more functions through similar code, such as limiting the maximum and minimum values ​​of the input box. jquery is a powerful javascript library that provides many practical methods and functions that can greatly simplify our development work. Therefore, learning and mastering jquery is very necessary for web developers.

The above is the detailed content of How to implement the increase and decrease functions of input box numbers in jquery. For more information, please follow other related articles on the PHP Chinese website!