Comment implémenter l'ajout, la soustraction et la suppression de sélection radio dans jquery

Avec le développement rapide d'Internet, la technologie front-end a attiré de plus en plus d'attention, parmi lesquelles jquery est l'une des bibliothèques js couramment utilisées dans le front-end. Dans le développement de sites Web, il est souvent nécessaire d'effectuer des opérations d'addition, de soustraction et de suppression sur la sélection de produits. Cet article explique comment utiliser jquery pour implémenter l'addition, la soustraction et la suppression à sélection unique.

1. Opération de sélection unique

Lors de la sélection de produits, nous devons généralement effectuer une opération de sélection unique, c'est-à-dire que nous ne pouvons en sélectionner qu'une parmi plusieurs options. Ce qui suit prend une catégorie de produits comme exemple pour montrer comment utiliser jquery pour implémenter des opérations de sélection unique.

Tout d'abord, générez plusieurs boutons radio via la balise d'entrée dans la page front-end, comme indiqué dans le code suivant :

<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>

Le code ci-dessus génère trois boutons radio, leur les noms sont « radio » et leurs valeurs sont respectivement 1, 2 et 3. Le but est de faciliter l’obtention de la valeur sélectionnée via jquery. Si vous ne donnez pas de nom au bouton radio, jquery ne pourra pas obtenir la valeur sélectionnée.

Ensuite, vous devez écrire du code jquery pour implémenter l'opération de sélection radio :

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

La fonction du code ci-dessus est de changer le "" de tous les boutons lorsque l'utilisateur clique sur l'attribut "checked" du bouton radio sur false, puis définit l'attribut "checked" du bouton actuel sur true. Cela garantit qu'un seul bouton radio est sélectionné à la fois.

2. Opérations d'addition et de soustraction

Ensuite, nous présenterons comment utiliser jquery pour implémenter des opérations d'addition et de soustraction. Lors de la sélection des produits, nous devrons peut-être sélectionner la quantité du produit, auquel cas nous devrons utiliser les boutons d'ajout et de soustraction pour y parvenir. Prenons la sélection de quantité comme exemple pour montrer comment utiliser jquery pour implémenter des opérations d'addition et de soustraction.

Tout d'abord, générez le code html pour la sélection de la quantité dans la page front-end :

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

Le code ci-dessus génère une boîte de sélection de quantité, comprenant un bouton moins, une saisie de quantité boîte, un bouton plus. La valeur initiale de la zone de saisie de la quantité est 1 et est désactivée, de sorte que l'utilisateur ne peut modifier la quantité qu'à l'aide des boutons plus et moins. De plus, chaque bouton reçoit un nom de classe pour faciliter la liaison via jquery.

Ensuite, vous devez écrire du code jquery pour implémenter les opérations d'addition et de soustraction :

$('.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);
})

La fonction du code ci-dessus est d'obtenir la quantité saisie via jquery lorsque l'utilisateur clique le bouton moins La valeur actuelle dans la boîte, si la valeur est supérieure à 1, décrémentez-la de un ; si la valeur est égale à 1, elle ne peut pas continuer à être réduite et un message d'invite apparaîtra. Lorsque l'utilisateur clique sur le bouton plus, la valeur de la zone de saisie de la quantité est directement augmentée de un. Cela permet d'obtenir des fonctions d'addition et de soustraction simples.

3. Opération de suppression

Enfin, nous présenterons comment utiliser jquery pour implémenter l'opération de suppression. Lors de la sélection de produits, nous devrons peut-être supprimer un produit, auquel cas nous devrons utiliser le bouton Supprimer. Prenons la liste de produits comme exemple pour montrer comment utiliser jquery pour implémenter l'opération de suppression.

Tout d'abord, générez le code html de la liste de produits dans la page front-end :

<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>

Le code ci-dessus génère une liste de produits, chaque produit comprend des images de produits, des noms de produits , et les prix des produits, bouton Supprimer. Le bouton Supprimer reçoit également un nom de classe pour faciliter la liaison via jquery.

Ensuite, vous devez écrire du code jquery pour implémenter l'opération de suppression :

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

La fonction du code ci-dessus est d'obtenir le parent du bouton via jquery lorsque l'utilisateur clique sur l'élément du bouton de suppression li, puis supprimez-le. Cela mettra en œuvre l’opération de suppression dans la liste des produits.

Conclusion

Grâce à la démonstration des trois cas ci-dessus, nous pouvons voir que l'utilisation de jquery peut facilement implémenter des opérations courantes telles que la sélection radio, l'addition, la soustraction et la suppression. De plus, dans les applications pratiques, nous pouvons encore améliorer et optimiser en fonction de besoins spécifiques. J'espère que cet article sera utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!