jqueryで完全な選択効果を実現する方法-jsチュートリアル-php.cn

jqueryで完全な選択効果を実現する方法

藏色散人

リリース： 2021-11-12 10:26:27

オリジナル

4992 人が閲覧しました

全選択効果を実現するための Jquery メソッド: 1. HTML サンプルファイルを作成します; 2. "$('input').click(function(){. ..}" メソッド選択するか選択しないだけです。

jqueryで完全な選択効果を実現する方法

この記事の動作環境: Windows7 システム、jquery3.2.1 バージョン、DELL G3 コンピューター

jQuery の全選択効果を実装する方法

jQuery はすべての選択効果を実現します

これは、次のコードです。

1. すべてのチェックボックスにはクリックイベントがあり、すべての効果はクリックイベントの下で実装されます

2. によって実装される関数全選択チェックボックスは他のチェックオプションで実装されているものと同じですが、クリックイベントで全選択チェックボックスのクリックイベントかどうかを全て判定します

3. そうであれば、全選択チェックボックスがチェックされているかどうかの判定を実行し、現在の状態がチェックされている場合は、クリックしてチェックを外し、すべてのオプションのチェックを同時に外します。現在、すべて選択がチェックされていない場合は、クリックしてチェックを入れ、すべてチェックを入れます

4. そうでない場合は、クリックされたオブジェクトがすべてのオプションの外にあることを意味します。他のオプションが選択されている場合は、現在チェックされているオプションの数が、「すべてを選択」を除くすべてのオプションの数と等しいかどうかを判断する必要があります。チェックボックス。これらが等しい場合は、すべてのオプションがオンになっていることを意味し、同時に [すべて選択] チェックボックスがオンになります。ボックスもオンになります。そうでない場合はオフになります。

次は私のコードです。

<!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>

ログイン後にコピー

全選択効果を実現するには多くのアイデアがありますが、このアイデアは 2 つのクリックイベントを分離するというアイデアとは少し異なります。

推奨学習: 「jquery ビデオチュートリアル」

以上がjqueryで完全な選択効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。