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

source:php.cn
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