How to implement radio selection addition, subtraction and deletion in jquery

With the rapid development of the Internet, front-end technology has attracted more and more attention, among which jquery is one of the commonly used js libraries in the front-end. In website development, it is often necessary to perform addition, subtraction, and deletion operations on product selection. This article will introduce how to use jquery to implement single-select addition, subtraction, and deletion.

1. Single-selection operation

When selecting products, we usually need to perform a single-selection operation, that is, only one can be selected among multiple options. The following takes a product category as an example to show how to use jquery to implement single selection operations.

First, generate multiple radio buttons through the input tag in the front-end page, as shown in the following code:

<div class="category">
  <input type="radio" name="radio" value="1"/>电脑
  <input type="radio" name="radio" value="2"/>手机
  <input type="radio" name="radio" value="3"/>电视
</div>

The above code generates three radio buttons, and their names are is "radio", and the values ​​are 1, 2, and 3 respectively. The purpose of this is to facilitate obtaining the selected value through jquery. If you don't give the radio button a name, jquery will not be able to get the selected value.

Next, you need to write jquery code to implement the radio selection operation:

$('.category input').click(function(){
  $('.category input').attr('checked',false);
  $(this).attr('checked',true);
})

The function of the above code is to set the "checked" attribute of all buttons when the user clicks the radio button. is false, and then sets the "checked" attribute of the current button to true. Doing this ensures that only one radio button is selected at a time.

2. Addition and subtraction operations

Next, we will introduce how to use jquery to implement addition and subtraction operations. When selecting products, we may need to select the quantity of the product, in which case we need to use the add and subtract buttons to achieve this. Let's take quantity selection as an example to demonstrate how to use jquery to implement addition and subtraction operations.

First, generate the html code for quantity selection in the front-end page:

<div class="quantity">
  <button class="minus">-</button>
  <input type="text" name="quantity" value="1" class="number" disabled>
  <button class="plus">+</button>
</div>

The above code generates a quantity selection box, including a minus button, a quantity input box, and a plus button . The initial value of the quantity input box is 1 and is disabled, so the user can only change the quantity through the plus and minus buttons. In addition, each button is given a class name to facilitate binding through jquery.

Next, you need to write jquery code to implement addition and subtraction operations:

$('.quantity .minus').click(function(){
  var num = parseInt($('.quantity .number').val());
  if(num > 1){
    $('.quantity .number').val(num - 1);
  }else{
    alert('数量不能小于1');
  }
})
$('.quantity .plus').click(function(){
  var num = parseInt($('.quantity .number').val());
  $('.quantity .number').val(num + 1);
})

The function of the above code is to get the current value in the quantity input box through jquery when the user clicks the minus button. value, if the value is greater than 1, then decrement it by one; if the value is equal to 1, it cannot continue to be reduced, and a prompt message will pop up. When the user clicks the plus button, the value of the quantity input box is directly increased by one. This achieves simple addition and subtraction functions.

3. Delete operation

Finally, we will introduce how to use jquery to implement the delete operation. In product selection, we may need to delete a product, in which case we need to use the delete button. Let's take the product list as an example to demonstrate how to use jquery to implement the deletion operation.

First, generate the html code of the product list in the front-end page:

<ul>
  <li>
    <img src="goods1.jpg">
    <h2>商品1</h2>
    <p>价格：99元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods2.jpg">
    <h2>商品2</h2>
    <p>价格：199元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods3.jpg">
    <h2>商品3</h2>
    <p>价格：299元</p>
    <button class="delete">删除</button>
  </li>
</ul>

The above code generates a product list, each product includes product pictures, product names, product prices, and delete buttons. The delete button is also given a class name to facilitate binding through jquery.

Next, you need to write jquery code to implement the delete operation:

$('.delete').click(function(){
  $(this).parent('li').remove();
})

The function of the above code is to get the parent element li of the button through jquery when the user clicks the delete button, and then Delete it. This will implement the deletion operation in the product list.

Conclusion

Through the demonstration of the above three cases, we can see that common operations such as radio selection, addition, subtraction, and deletion can be easily implemented using jquery. In addition, in practical applications, we can further improve and optimize according to specific needs. Hope this article is helpful to everyone.

The above is the detailed content of How to implement radio selection addition, subtraction and deletion in jquery. For more information, please follow other related articles on the PHP Chinese website!