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

藏色散人
リリース: 2021-11-12 10:26:27
オリジナル
5120 人が閲覧しました

全選択効果を実現するための 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート