Maison > Article > interface Web > Comment sélectionner et inverser toutes les cases à cocher dans js

Comment sélectionner et inverser toutes les cases à cocher dans js

一个新手original: 2017-09-30 09:04:382342parcourir

Cet article concerne les cases à cocher, qui ont deux formes : 1. Tout sélectionner et inverser la sélection sont implémentés par 2 boutons ; 2. Tout sélectionner et inverser la sélection sont implémentés par un seul bouton ;

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>复选框demo</title>
        <script src="../js/jquery-1.10.2.js" type="text/javascript"></script>
        <style>
            body{ text-align:center} 
            .con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;} 
        </style> 
    </head>
    <body>
        <p class="con">
            <span><input type=&#39;checkbox&#39; name=&#39;select&#39; onclick=&#39;allSelect()&#39;>全选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;cancel&#39; onclick=&#39;unAllSelect()&#39;>反选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />苹果</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />香蕉</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />梨子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />桃子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />西瓜</span>
            
            <br><br><br>
            
            <span><input type=&#39;checkbox&#39; id="allBook"  name=&#39;allBook&#39; />全选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />老子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />尚书</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />周易</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />诗经</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />孟子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />中庸</span>
            <script type="text/javascript">
    //全选
    function allSelect(){
        $("input[name=&#39;fruit&#39;]").prop("checked", "checked");
        $("input[name=&#39;cancel&#39;]").removeAttr("checked");
    }    //反选
    function unAllSelect(){
        $("input[name=&#39;fruit&#39;]").removeAttr("checked");
        $("input[name=&#39;select&#39;]").removeAttr("checked");
    }    
    //单选    
            $("#allBook").click(function(){        
            if(this.checked){//            
            $("input[name=&#39;book&#39;]").attr("checked", true);            
            $("input[name=&#39;book&#39;]").prop("checked", "checked");
          }else{//          
          $("input[name=&#39;book&#39;]").attr("checked", false);            
          $("input[name=&#39;book&#39;]").removeAttr("checked");
          }
    });</script>
        </p>
    </body>
    </html>

J'ai rencontré un problème en pratique - la vérification n'a pas réussi à tout sélectionner. La solution consiste à utiliser la méthode prop au lieu de attr.

$("input[name=&#39;book&#39;]").attr("checked", "checked");
$("input[name=&#39;book&#39;]").prop("checked", "checked");

Cela peut être lié à la version 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!

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：Comment utiliser Ready dans jqureyArticle suivant：Comment utiliser Ready dans jqurey

Articles Liés

Voir plus