Comment obtenir un effet de sélection complète avec jquery-js tutoriel-php.cn

Comment obtenir un effet de sélection complète avec jquery

藏色散人

Libérer： 2021-11-12 10:26:27

original

5118 Les gens l'ont consulté

Comment obtenir l'effet tout sélectionner avec jquery : 1. Créez un exemple de fichier HTML ; 2. Utilisez la méthode "$('input').click(function(){...}" pour déterminer si le fichier actuel La case de sélection de tout est sélectionnée

Comment obtenir un effet de sélection complète avec jquery

L'environnement d'exploitation de cet article : système Windows7, jquery version 3.2.1, ordinateur DELL G3

Comment obtenir l'effet de sélection totale avec jquery ? jQuery pour obtenir l'effet de sélection totale

Il s'agit d'une section utilisant jquery. L'idée principale du code pour tout sélectionner est la suivante :

1. Toutes les cases à cocher ont des événements de clic et tous les effets sont implémentés sous. l'événement de clic

2. Les fonctions implémentées en sélectionnant toutes les cases à cocher sont différentes des autres. Les fonctions implémentées par les options de vérification sont différentes. Un jugement est effectué au sein de l'événement de clic pour déterminer s'il s'agit d'un événement de clic pour tous les éléments sélectionnés. 3. Si c'est le cas, effectuez un jugement pour déterminer si la case à cocher Tous sélectionnés est sélectionnée. Si l'état actuel est sélectionné, cliquez pour décocher et décocher toutes les options en même temps. cliquez pour vérifier et cocher tout

4. Si ce n'est pas le cas, cela signifie que l'objet cliqué est en dehors des autres options Sélectionner tout, alors il est nécessaire de déterminer si le nombre d'options actuellement cochées est égal au nombre de toutes les options sauf. la case à cocher tout sélectionner. S'ils sont égaux, cela signifie que toutes les options sont cochées, et la case à cocher tout sélectionner est également Cochez-la, sinon ne la cochez pas

Ce qui suit est mon code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>全选效果</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(&#39;input&#39;).click(function(){
                    if($(this).index() == 0){
                        //判断当前全选框是否选中，如果选中则全选，否则全不选
                        if($(&#39;input&#39;).eq(0).prop(&#39;checked&#39;)){
                            $(this).nextAll().prop(&#39;checked&#39;,true);
                        }else{
                            $(this).nextAll().prop(&#39;checked&#39;,false);
                        }
                    }else{
                        //判断除了全选之外的选项是否全部选中，选中则勾上全选，否则全不选
                        if($(&#39;input:gt(0):checked&#39;).length == $(&#39;input&#39;).length-1){
                            $(&#39;input&#39;).eq(0).prop(&#39;checked&#39;,true)
                        }else{
                            $(&#39;input&#39;).eq(0).prop(&#39;checked&#39;,false)
                        }
                    }  
                })
            })
        </script>
    </head>
    <body>
        <input type="checkbox" />全选
        <input type="checkbox" />语文
        <input type="checkbox" />数学
        <input type="checkbox" />英语
    </body>
</html>

Copier après la connexion

Il existe de nombreuses idées pour obtenir l'effet de sélection totale. Cette idée est légèrement plus difficile que l'idée de séparer deux événements de clic, mais le code pour obtenir l'effet est en fait le même.

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!