Maison > interface Web > tutoriel CSS > Comment cocher toutes les cases sauf une spécifique avec jQuery ?

Comment cocher toutes les cases sauf une spécifique avec jQuery ?

DDD
Libérer: 2024-11-15 00:14:02
original
927 Les gens l'ont consulté

How to Select All Checkboxes Except for a Specific One with jQuery?

Comment sélectionner toutes les cases à cocher avec jQuery, à l'exception d'une case spécifique ?

Lorsque vous utilisez des sélecteurs jQuery, des scénarios surviennent dans lesquels vous devez sélectionner un ensemble d'éléments tout en excluant autres. Dans ce cas, la sélection de toutes les cases à cocher présentes sur une page web, mais pas d'une en particulier, peut être réalisée avec quelques lignes de code jQuery.

Étant donné un balisage constitué d'un tableau avec plusieurs cases à cocher de saisie, avec une case à cocher ayant un identifiant unique de "select_all", l'objectif est de cocher toutes les cases sauf la case "#select_all" lorsqu'elle est cliqué.

Code jQuery :

Pour ce faire, vous pouvez utiliser le code jQuery suivant :

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.prop('checked', $(this).is(':checked'));
});
Copier après la connexion

Explication :

  • L'événement de changement est lié à la case à cocher "select_all" à l'aide du Sélecteur $('#select_all').change(...).
  • Lorsque la case à cocher est cliquée ou que son état change (c'est-à-dire cochée ou décochée), la fonction de gestionnaire d'événements est exécutée.
  • Le $(this).closest('form').find(':checkbox'); selector récupère tous les éléments de case à cocher dans le même formulaire que la case à cocher "select_all". Cela exclut la case à cocher "select_all" puisqu'elle est l'initiatrice de l'événement.
  • Le prop('checked', $(this).is(':checked')); La ligne détermine si la case "select_all" est cochée ou non. Il applique ensuite le même état coché à toutes les autres cases à cocher du formulaire.

Cette approche fait basculer efficacement l'état coché de toutes les cases à cocher lorsque la case « select_all » est cliquée.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal