JQuery implémente l'encapsulation de la sélection et l'inversion de la sélection de toutes les cases à cocher de la liste

Quand on fait des listes, on rencontre souvent le problème de tout sélectionner et d'inverser la sélection pour le traitement par lots, par exemple :

Je l'ai simplement implémenté à l'époque, et j'ai ensuite voulu l'encapsuler Dans le public js, l'encapsulation est si mauvaise que je suis gêné de le publier (c'est-à-dire de mettre le code d'implémentation dans le public js, puis d'utiliser un identifiant et une classe fixes pour chaque page. Maintenant que je réfléchissez-y, je suis gêné de l'appeler Encapsulated), et puis j'ai pensé que le patron avait déjà écrit cette fonction. Voyons comment il l'a écrite sans comparaison. 🎜>

Tout d'abord, l'encapsulation élevée ici montre qu'il n'y a qu'un seul attribut personnalisé data-check-target utilisé pour le pont de connexion après la séparation de js et html (et j'en ai utilisé deux à l'époque : un cochez toutes les cases, une sous-case à cocher, les points pertinents sont utilisés, cela n'a pas d'effet d'encapsulation et le couplage entre js et html est trop important) (Quand j'ai vu le js ci-dessus, je pensais à comment connecter trois éléments liés via un point de connexion);

$(':checkbox[data-check-target]').click(function () {
var target = $(this).attr('data-check-target');
if ($(this).prop('checked')) {
$(target).prop('checked', true);
} else {
$(target).prop('checked', false);
}
});

Ensuite, continuons à examiner les utilisations spécifiques :

J'ai trouvé que la case à cocher Tout sélectionner est utilisé pour les données d'attribut personnalisées du pont lié à js check-target est un peu spécial :

<input type="checkbox" data-check-target=".id-checkbox" />

Sa valeur est ".id-checkbox", qui ressemble. étrange. Continuez à regarder l'implémentation de la sous-case à cocher :

<input type="checkbox" name="ids[]" value="@item.Id" class="id-checkbox" />

Il m'est soudain apparu que le nom de classe de la sous-case à cocher est stocké dans la vérification des données de l'attribut personnalisé. -target;

var target = $(this).attr('data-check-target');

Ensuite, récupérez la classe de la sous-case à cocher via l'attribut personnalisé data-check-target pour obtenir une encapsulation élevée

Ce que je résume ; est-ce que js et html transmettent la communication de l'attribut personnalisé data -check-target, la sous-case à cocher s'appuie sur la valeur de l'attribut personnalisé de la case à cocher select-all data-check-target

Cet exemple n'est pas difficile à réaliser ; code, et il n'y a rien de difficile à comprendre. C'est grâce à un attribut personnalisé qui complète intelligemment l'encapsulation à faible couplage, qui est aussi la difficulté et l'essence de ce code

Je ne peux vraiment pas retenir mon intérieur ; admiration, ces lignes de code sont si belles.

PS : Pourquoi le js ci-dessus utilise-t-il prop au lieu de attr ? Parce que : si l'attribut vérifié n'est pas défini lors de son initialisation dans l'entrée actuelle, alors l'élément n'a pas d'attribut vérifié spécifié, donc .attr( ) renverra undefined;

Pour les attributs inhérents à l'élément HTML lui-même, utilisez la méthode prop lors du traitement.

Pour nos propres attributs DOM personnalisés des éléments HTML, utilisez la méthode attr lors de leur traitement.

Ce qui précède est l'implémentation de JQuery présentée par l'éditeur pour encapsuler la fonction de sélection de case à cocher et de sélection inverse dans la liste (recommandé). J'espère que cela vous sera utile. Si vous avez des questions, veuillez. laissez-moi un message. L'éditeur répondra à tout le monde dans les plus brefs délais. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'implémentations JQuery de la case à cocher dans la liste, sélectionnez tout et inversez la fonction de sélection des articles liés à l'encapsulation, veuillez faire attention au site Web PHP chinois !