case à cocher jquery cochée solution au problème de bogue et analyse_jquery

Lorsque je travaillais sur un projet, j'ai rencontré un bug dans la case à cocher jQuery checkbok. Après avoir consulté un maître, j'ai compris ce qui se passait, je l'ai enregistré ici et je l'ai analysé pour tout le monde.

Entrez d'abord le code :

Copier le code Le code est le suivant :

​ ​ ​ Quel est votre sport préféré ? Sélectionner tout/tout désélectionner

           football
           Basketball
           Badminton
            tennis de table
                                                                                             

Copier le code Le code est le suivant :

$("#CheckedAll").click(function () {
Si ($(this).is(":checked")) {
                               $("[name=items]:checkbox").attr("checked", true);
                    } autre {
                                 $("[name=items]:checkbox").attr("checked", false);
                }
            });

La première fois que je l'ai exécuté, il n'y a eu aucun problème, mais la deuxième fois que je l'ai exécuté, il y a eu un problème et je n'ai pas pu choisir

Solution : Remplacer attr() par prop()

Copier le code Le code est le suivant :

$("#CheckedAll").click(function () {
Si ($(this).is(":checked")) {
                            $("[name=items]:checkbox").prop("checked", true);
                    } autre {
                             $("[name=items]:checkbox").prop("checked", false);
                }
            });

PS : La différence entre prop() et attr() :

J'ai récemment vu dans les actualités d'iteye que jQuery avait été mis à jour vers la version 1.6.1. Le plus gros changement par rapport à la version précédente est l'ajout de la méthode .prop. Cependant, il est difficile de faire littéralement la distinction entre la méthode .prop() et la méthode .attr(). En chinois, propriétés et attributs signifient tous deux « attributs ».
Ce qui suit est une brève traduction de l'utilisation de .prop() et .attr() basée sur cet article de blog (javascript:mctmp(0);) :

1. Mise à niveau de 1.5.2 vers 1.6.1

En introduisant la nouvelle méthode .prop() et les modifications apportées à la méthode .attr(), jQuery 1.6.1 a déclenché une discussion animée sur les différences et les connexions entre les attributs et les propriétés. Dans le même temps, la version 1.6.1 résout également certains problèmes de compatibilité ascendante. Lors de la mise à niveau de 1.5.2 vers 1.6.1, vous n'avez pas besoin de modifier de code d'attribut.

Ce qui suit est une description des modifications apportées au module Attributs dans jQuery 1.6 et 1.6.1, ainsi que l'utilisation préférée de la méthode .attr() et de la méthode .prop(). Cependant, comme mentionné précédemment, jQuery 1.6.1 vous permet d'utiliser la méthode .attr() comme elle était utilisée dans tous les cas auparavant.

2. Quels changements se sont produits

La modification apportée au module Attributs visait à supprimer l'ambiguïté entre les attributs et les propriétés, mais a provoqué une certaine confusion dans la communauté jQuery car dans toutes les versions antérieures à la 1.6, il était géré à l'aide d'une seule méthode (.attr()) pour les attributs et les propriétés. Mais l’ancienne méthode .attr() présente quelques bugs et est difficile à maintenir. jQuery1.6.1 met à jour le module Attributs et corrige plusieurs bugs.

Une mention spéciale est que les attributs booléens, tels que : vérifié, sélectionné, en lecture seule et désactivé, sont traités de la même manière dans la version 1.6.1 qu'avant la version 1.6. Cela signifie le code suivant :

Copier le code Le code est le suivant :

$(“:checkbox”).attr(“checked”, true
); $("option").attr("sélectionné", vrai
); $("input").attr("lecture seule", vrai
); $("entrée").attr("désactivé", vrai
);

Même un code comme celui-ci :

Copier le code Le code est le suivant :

if ( $(“:checkbox”).attr(“checked”) ) { /* Faire quelque chose */ }

Aucune modification n'est nécessaire dans la version 1.6.1 pour maintenir les performances précédemment attendues.

Afin de rendre plus claires les modifications apportées à la méthode .attr() dans jQuery 1.6, voici quelques exemples d'utilisation de .attr(). Bien qu'elle puisse fonctionner normalement dans les versions précédentes de jQuery, elle doit être utilisée maintenant. () à la place :

Tout d'abord, l'utilisation de la méthode .attr() dans une fenêtre ou un document ne fonctionne pas correctement dans jQuery 1.6 car il ne peut pas y avoir d'attributs dans la fenêtre et le document. Ils contiennent des propriétés (telles que location ou readyState) et doivent être manipulés à l'aide de la méthode .prop() ou simplement à l'aide de méthodes JavaScript natives. Dans jQuery 1.6.1, l'utilisation de .attr() dans la fenêtre et le document sera automatiquement convertie en utilisation de .prop au lieu de générer une erreur.

Deuxièmement, les attributs vérifiés, sélectionnés et autres attributs booléens mentionnés précédemment sont traités spécialement en raison de la relation particulière entre ces attributs et leurs propriétés correspondantes. Fondamentalement, un attribut est ce que vous voyez dans le code HTML suivant :

les attributs booléens, tels que vérifié, sont uniquement définis sur des valeurs par défaut ou initiales. Dans un élément de case à cocher, les attributs cochés sont définis lors du chargement de la page, que l'élément de case à cocher soit ou non sélectionné.

Les propriétés sont ce que le navigateur utilise pour enregistrer la valeur actuelle. Normalement, les propriétés reflètent leurs attributs correspondants (le cas échéant). Mais ce n’est pas le cas des attributs booléens. Les propriétés booléennes sont maintenues à jour lorsque l'utilisateur clique sur un élément de case à cocher ou sélectionne une option dans un élément de sélection. Mais les attributs booléens correspondants sont différents. Comme mentionné ci-dessus, ils ne sont utilisés par le navigateur que pour sauvegarder la valeur initiale.

Copier le code Le code est le suivant :

$(“:checkbox”).get(0).checked = true
// Est identique à $(":checkbox:first").prop("checked", true

Dans jQuery1.6, si vous utilisez la méthode suivante pour définir coché :

Copier le code Le code est le suivant :

$(“:checkbox”).attr(“checked”, true

);

L'élément checkbox ne sera pas coché car c'est une propriété qui doit être définie, mais tous vos paramètres seront des valeurs initiales.

Cependant, une fois jQuery 1.6 sorti, l'équipe jQuery a compris que définir certaines valeurs n'était pas particulièrement utile lorsque le navigateur ne se souciait que du chargement des pages. Par conséquent, afin de maintenir la compatibilité ascendante et l'utilité de la méthode .attr(), nous pouvons continuer à utiliser la méthode .attr() pour obtenir et définir ces attributs booléens dans jQuery 1.6.1.

Les attributs les plus courants sont vérifiés, sélectionnés, désactivés et en lecture seule, mais voici la liste complète des supports jQuery 1.6.1 utilisant .attr() pour obtenir et définir dynamiquement les attributs/propriétés booléens :

autofocus, lecture automatique, asynchrone, coché, contrôles, différé, désactivé,
masqué, boucle, multiple, ouvert, lecture seule, obligatoire, limité, sélectionné

(Note du traducteur : la plupart d'entre eux sont de nouveaux attributs ajoutés à html5)

Il est toujours recommandé d'utiliser la méthode .prop() pour définir ces attributs/propriétés booléens Même si ces cas d'utilisation ne sont pas convertis pour utiliser la méthode .prop(), votre code peut toujours s'exécuter normalement dans jQuery 1.6. 1.

Ce qui suit est une liste de certains attributs et propriétés. Dans des circonstances normales, vous devez utiliser leurs méthodes correspondantes (voir la liste ci-dessous) pour les obtenir et les définir. Ce qui suit est la première utilisation, mais la méthode .attr() fonctionnera avec tous les attributs.

Remarque : certaines propriétés d'éléments DOM sont également répertoriées ci-dessous, mais ne s'exécutent que dans la nouvelle méthode .prop()

*Par exemple : window.location
**Si nécessaire (si nécessaire) .width()

Ni .attr() ni .prop() ne doivent être utilisés pour obtenir/définir des valeurs. Utilisez plutôt la méthode .val() (même en utilisant .attr("value","somevalue") continuera à fonctionner, comme avant la version 1.6)

3. Aperçu de l'utilisation préférée

La méthode

.prop() doit être utilisée pour gérer les attributs/propriétés booléens et les propriétés qui n'existent pas en HTML (par exemple : window.location). Tous les autres attributs (ceux que vous voyez en HTML) peuvent et doivent continuer à être manipulés à l'aide de la méthode .attr().

Le résumé ci-dessus a été décrit assez clairement, et il n’est pas nécessaire que je le résume davantage.