Maison >interface Web >js tutoriel >Comment résoudre le problème de l'échec de la case à cocher après avoir été à nouveau cochée ?

Comment résoudre le problème de l'échec de la case à cocher après avoir été à nouveau cochée ?

零下一度original: 2017-07-18 15:36:141754parcourir

Le code traditionnel de sélection et d'annulation est le suivant :

[html] view plain copy
 print?
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <title></title>  
    <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>  
</head>  
<body>  
    <input type="checkbox" name="checkbox" id="checkbox" >  
    <input type="button" onclick="btn_submit();" name="" id="btn_submit" value="选中">  
    <input type="button" onclick="btn_cancel();" id="btn_cancel" value="取消选中">  
</body>  
    <script>  
        var btn_cancel = function(){  
            <span style="color:#ff0000;">$("#checkbox").attr(&#39;checked&#39;,false);</span>  
        };  
        var btn_submit = function(){  
            <span style="color:#ff0000;">$("#checkbox").attr(&#39;checked&#39;,true);</span>  
        };  
    </script>  
</html>

//Point problématique

Les cases à cocher de l'état initial ne sont pas toutes cochées,

cliquez sur Le bouton Sélectionner tout appelle la méthode checkAll,

réalise la sélection de tous,

puis clique sur le bouton Désélectionner tout,

réalise la sélection d'aucun,

Cliquez ensuite à nouveau sur le bouton Sélectionner tout,

mais le résultat n'est pas tout sélectionné,

Cliquez encore et encore mais rien ne se passera.

démo :

76c82f278ac045591c9159d381de2c579fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30ea80eb7cbb6fff8b0ff70bae37074b813b2386ffb911b14667cb8f0f91ea547a7Title6e916e0f7d1e588d4f442bf645aedb2f6384a94401dd3513192f74c325564aea2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83a$(function () {
            $("#allchoose").click(function () {
                    $(":checkbox").prop("checked",true);
            })
            $("#allnochoose").click(function () {if ($(":checkbox").is(":checked")){
                    $(":checkbox").attr("checked",false);
                }
            })
            $("#choose").click(function () {if($(":checkbox").is(":checked")){
                    $(":checkbox").attr("checked",false);
                }else{
                    $(":checkbox").prop("checked",true);
                }
            })
        })2cacc6d41bbb37262a98f745aa00fbf09c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d05f88359cedaf04b59ecc6462ae643a3乒乓球05f88359cedaf04b59ecc6462ae643a3羽毛球05f88359cedaf04b59ecc6462ae643a3足球05f88359cedaf04b59ecc6462ae643a3篮球05f88359cedaf04b59ecc6462ae643a3排球0c6dc11e160d3b678d68754cc175188ac298a9150f2032ba9c3fe765dfee4fa19638d8e6fd0d8d8d915cec792be9f6422f4258eeae05fe136e53d11f74f1bc52215346cc9e1a329ee20621ddbf63cae836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

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!

Déclaration：

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

Article précédent：Introduction à la méthode de téléchargement asynchrone de fichiers image en javascriptArticle suivant：Introduction à la méthode de téléchargement asynchrone de fichiers image en javascript

Articles Liés

Voir plus