Problèmes lorsque jquery attr gère des éléments de formulaire tels que checkbox/select-js tutoriel-php.cn

Problèmes lorsque jquery attr gère des éléments de formulaire tels que checkbox/select

巴扎黑

Libérer： 2017-06-26 14:23:26

original

1498 Les gens l'ont consulté

Commençons par la structure HTML

<body><form action=""><input type="checkbox" id="checkedAll">全选/全不选<br><input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="蓝球">蓝球<input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="乒乓球">乒乓球<br><input type="button" id="send" value="提交"></form></body>

Copier après la connexion

Comme le montre l'image, il s'agit d'un cas dans le livre classique avancé front-end [Sharp jquery], en utilisant l'attr méthode pour ajouter des attributs aux éléments. Obtenir des effets de sélection et d’annulation.

Exigences : 1. Cliquez sur Sélectionner tout/Sélectionner tout pour modifier l'état sélectionné des quatre cases à cocher ci-dessous ; >Sélectionner tout/Tout désélectionner

est désélectionné. Si toutes sont sélectionnées,

ci-dessus. tout sélectionner/tout désélectionner sera également automatiquement sélectionné.

<script>"#checkedAll").on("click",

Copier après la connexion

        // 判断点击后this.checked的结果，默认未选中即为false，第一次点击则为true,第二次为false,再赋值给下面的input（此处逻辑与书上稍有不同）
        // 注意事项： 使用attr给表单元素设置选中状态时，第二个参数一定要是布尔值true/false,不能习惯性写成带引号，那就是字符串了。

Copier après la connexion

Il semble fonctionner correctement, mais vous le trouverez après plusieurs clics , des attributs peuvent être ajoutés, mais le statut sélectionné ne change pas.

        if(this.checked){
            $("input[name=items]").attr("checked",true); 
        }else{
            $("input[name=items]").attr("checked",false);
        }
    })</script>

Copier après la connexion

qu'est-ce qui ne va pas ?

Cela est dû à la version de jQuery Après 1.6, pour les attributs inhérents aux éléments, vous devez utiliser

<. m>

prop()

. <strong>prop()</strong> 方法。

Le code ci-dessus peut également être simplifié en

<script>$("#checkedAll").on("click",function(){
        console.log(!this.checked);if(this.checked){
            $("input[name=items]").prop("checked",true);
        }else{
            $("input[name=items]").prop("checked",false);
        }
    })</script>

Copier après la connexion

<script>$("#checkedAll").on("click",function(){
        $("input").prop("checked",this.checked);
    })</script>

Copier après la connexion

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!