Maison > interface Web > Questions et réponses frontales > Que faire si jquery .attr échoue

Que faire si jquery .attr échoue

藏色散人
Libérer: 2021-11-11 10:43:23
original
2863 Les gens l'ont consulté

Solution à l'échec de jquery .attr : 1. Créez un exemple de fichier HTML ; 2. Cochez la case via jquery ; 3. Remplacez attr par prop.

Que faire si jquery .attr échoue

L'environnement d'exploitation de cet article : système Windows 7, jquery version 1.2.6, ordinateur DELL G3

Que dois-je faire si jquery .attr échoue ?

Résoudre le problème de l'échec de jquery attr après une utilisation répétée

Aujourd'hui, lorsque j'ai créé une fonction select all, j'ai utilisé la méthode attr de jq, mais quand je l'ai réellement utilisée, pour la première fois, j'ai pu réaliser la fonction de en sélectionnant tout et en ne sélectionnant pas tout, cependant

Si vous cliquez plusieurs fois, l'effet de vérification disparaîtra !

Jetons d'abord un coup d'oeil au code :

<!DOCTYPE html>  
<html>  
    <head >  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>jquery操作checkbox方法</title>  
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>  
    <script type="text/javascript" >  
         //全选  
         function selectAll() {  
             //方法一:  
             $("input[name=&#39;bjjb&#39;]").attr("checked",true);  
             //方法二:  
             /**$("input[name=&#39;bjjb&#39;]").each(function(){  
                  $(this).attr("checked",true);  
             });*/  
             //获得checkbox的值和文本  
              $("#checked").html("");  
              $("#checkedText").html("");  
              $("input[name=&#39;bjjb&#39;]:checked").each(function () {  
                    $("#checked").append($(this).val()+",");  
                    //注意文本一定要元素标签如span否则next得不到值  
                    $("#checkedText").append($(this).next().text()+",");  
              });  
         }  
         //取消全选  
         function selectNone(){  
             //方法一:  
            $("input[name=&#39;bjjb&#39;]").removeAttr("checked");  
            //方法二:  
            /*$("input[name=&#39;bjjb&#39;]").each(function(){  
                  $(this).attr("checked",false);  
             });*/  
              //获得checkbox的值和文本  
              $("#checked").html("");  
              $("#checkedText").html("");  
              $("input[name=&#39;bjjb&#39;]:checked").each(function () {  
                    $("#checked").append($(this).val()+",");  
                    //注意文本一定要元素标签如span否则next得不到值  
                    $("#checkedText").append($(this).next().text()+",");  
              });  
         }  
         //反选  
         function selectInvert() {  
            $("input[name=&#39;bjjb&#39;]").each(function(index,item){  
                 if ($(this).attr("checked")) {  
                    $(this).removeAttr("checked");  
                 } else {  
                    $(this).attr("checked", true);  
                }  
            });  
         }  
     </script>  
    </head>  
    <body>  
        <form  id="" action="" method="post">  
            <div >  
                <input type="checkbox" name="bjjb" value="1"/><span>選項一</span></br>  
                <input type="checkbox" name="bjjb" value="2"/><span>選項二</span></br>   
                <input type="checkbox" name="bjjb" value="3"/><span>選項三</span></br>    
                <input type="checkbox" name="bjjb" value="4"/><span>選項四</span></br>  
                <input type="checkbox" name="bjjb" value="5"/><span>選項五</span></br>  
            </div>  
            <div style="margin-top:10px;">  
                <input type="button"   onclick="selectAll()"   value="全选" />  
                <input type="button"   onclick="selectNone()"    value="全不选" />  
                <input type="button"   onclick="selectInvert()"   value="反选" />  
            </div>  
            <div style="margin-top:10px;">  
                选中项:<div id="checked"></div>  
                选中文本:<div id="checkedText"></div>  
            </div>  
        </form>  
  </body>  
</html>
Copier après la connexion

Effet de l'opération :

Première fois (cliquez pour tout sélectionner) :

Deuxième fois (cliquez pour tout désélectionner) :

Troisième fois ( encore une fois Cliquez pour tout sélectionner) :

Bien que j'ai cliqué dessus, il n'y a pas de coche. Effectivement, il y a un problème.

Après plusieurs vérifications, le maître du forum a déclaré : S'il s'agit d'un attribut du html lui-même, il est préférable d'utiliser la méthode prop

Après avoir vérifié le document jquery 1.8, la méthode prop est également utilisé pour donner le même exemple :

Alors, comment changer ce qui précède ?

C'est très simple :

Remplacez simplement attr par prop. Allez l'essayer! !

Apprentissage recommandé : "tutoriel vidéo jquery"

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!

Étiquettes associées:
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