このチュートリアルでは、jQueryを使用して、複數(shù)の領(lǐng)域のチェックボックスのすべておよび反選択関數(shù)を?qū)g裝する方法を詳細(xì)に説明しています。獨(dú)立したエリアのすべてのチェックボックスを設(shè)定し、そのステータスの変更を聞くことにより、そのエリア內(nèi)のすべてのサブチェックボックスの選択したステータスを自動(dòng)的に同期します。同時(shí)に、ユーザーインターフェイスロジックの整合性と一貫性を確保するために、エリア內(nèi)のサブチェックボックスのステータスが変更されたときに「すべてを選択する」チェックボックスのステータスを動(dòng)的に更新する方法もカバーします。

コアコンセプトとHTML構(gòu)造の最適化

複雑なフォームまたはデータ表示シナリオでは、多くの場合、チェックボックスのセットで「すべてを選択」または「すべての選択」操作を?qū)g行する必要があります。ページに複數(shù)の獨(dú)立したチェックボックスグループがある場合、各グループには獨(dú)自の「すべての選択」機(jī)能が必要であり、互いに影響を與えません。この関數(shù)を?qū)g裝するコアは次のとおりです。

1. 明確な領(lǐng)域の境界：獨(dú)立したチェックボックスグループごとに共通の親コンテナを定義し、jQueryが動(dòng)作範(fàn)囲を正確に定義できるように、一意のアイデンティティまたはクラス名を指定します。
2. [すべての選択]チェックボックスを識別します。各グループ內(nèi)の[すべてのグループ]チェックボックスに特定のクラス名を割り當(dāng)てて、セレクターによって簡単に識別できるようにします。

上記の原則に基づいて、元のHTML構(gòu)造を最適化し、MyDIVクラスを?qū)毪筏篇?dú)立したチェックボックスグループを識別し、SelectAllクラスを?qū)毪筏啤袱工伽皮芜x択」チェックボックスを識別します。

  
<div class="actions" id="actions" title="actions">
   
   <div class="mydiv">
       <div>  select  <br>
       <div>  it  <br>
       <div>  itm  <br>
       <div>  itme 3  <br>
   </div>

   
   <div class="mydiv">
       <div> すべて <br>を選択します
       <div>  itme 27  <br>
       <div>  itme 28  <br>
       <div>  itme  <br>
       <div>  item 30  <br>
       <div>  item 31 
   </div>
</div>
<p>上記のコードでは、各獨(dú)立したチェックボックスグループをMyDIVクラスでラップし、各グループの「すべての選択」チェックボックスにSelectAllクラスを追加します。</p>
<h3> jQuery実裝ロジック</h3>
<p>次に、jQueryを使用して、それぞれ2つのメインイベントハンドラーを作成します。「すべての選択」チェックボックスと通常のチェックボックスのクリックイベントを処理します。</p>
<h4> 1?！袱工伽皮蜻x択する/選択するすべての選択」チェックボックスの制御</h4>
<p>ユーザーが「すべての選択」チェックボックスをクリックすると、現(xiàn)在の選択されたステータスに従って、同じグループ內(nèi)の他のすべてのチェックボックスの選択したステータスを同期する必要があります。</p>
<pre class="brush:php;toolbar:false"> $（'。SELECTALL '）。on（' Click '、function（）{
  //現(xiàn)在の「選択」チェックボックスの選択したステータスを取得します。

  //最寄りの親を見つけて、上向きに.myDiv要素を見つけてから、その內(nèi)部のすべてのチェックボックスを見つけます$（this）.Parents（ '。myDiv'）。
    //「すべての選択」チェックボックス$（this）.prop（ 'checked'、isselected）と一致する同じグループのすべてのチェックボックスの選択したステータスを設(shè)定します。
  }）;
}）;

説明する：

• $（'。SelectAll '）
• $（this）.is（ '：checked'）：現(xiàn)在クリックされている「すべての選択」チェックボックスの選択されたステータス（trueまたはfalse）を取得します。
• $（this）.Parents（ '。myDiv'）：現(xiàn)在クリックされている「すべての選択」チェックボックスからDOMツリーを橫斷して、最も近い親myDIV要素を見つけます。これにより、操作が現(xiàn)在のチェックボックスが存在するグループのみに制限されます。
• .find（ 'input [type = "checkbox"]'）：見つかったmydiv內(nèi)で、「すべての選択」チェックボックス自體を含む入力タイプのすべての要素を見つけます。
• .each（function（）{...}）：見つかったすべてのチェックボックスを繰り返します。
• $（this）.prop（ 'checked'、isselected）：各チェックボックスのチェック済みプロパティを設(shè)定して、発行された狀態(tài)と一致するようにします。

2。通常のチェックボックスのリンケージ制御

ユーザーがグループ內(nèi)の通常のチェックボックスをクリックすると、グループ內(nèi)のすべての通常のチェックボックスの選択されたステータスに基づいて、「すべての選択」チェックボックスのステータスを動(dòng)的に更新する必要があります。特定のロジックは次のとおりです。すべての通常のチェックボックスが選択されている場合、「すべての選択」チェックボックスも選択する必要があります。それ以外の場合、「すべての選択」チェックボックスが元々選択された場合、チェックされていないはずです。

 $（ '入力：not（ "。selectal"）'）。on（ 'click'、function（）{
  //現(xiàn)在のチェックボックスが配置されているParent.MyDiv要素を取得します。 $ parentDiv = $（this）.parents（ '。mydiv'）;
  //「すべての選択」チェックボックスを取得するこのグループでは、$ selectalcheckbox = $ parentdiv.find（'。SelectAll '）;

  //統(tǒng)計(jì)「すべての選択」チェックボックスを除くこのグループのすべてのチェックボックスの數(shù)は、totalcheckboxes = $ parentdiv.find（ 'input：not（ "。selectal"）'）。
  //統(tǒng)計(jì)「すべての選択」チェックボックスを除くこのグループで選択されたチェックボックスの數(shù)は、checkedcheckboxes = $ parentdiv.find（ 'input：checked：not（ "。selectal"）'）。

  //すべての通常のチェックボックスが選択されている場合、「すべての選択」チェックボックスを選択します（totalcheckboxes === checkedcheckboxes）{
    $ selectalcheckbox.prop（ 'checked'、true）;
  } それ以外 {
    //それ以外の場合は、「すべての選択」チェックボックスをチェックしてください$ selectalcheckbox.prop（ 'checked'、false）;
  }
}）;

説明する：

• $（ 'input：not（ " 。selectal "）'）。
• $ parentDiv = $（this）.parents（ '。mydiv'）;：現(xiàn)在クリックしている通常のチェックボックスが配置されているmydiv親要素を取得します。
• $ selectalcheckbox = $ parentdiv.find（'。selectall '）;：このmydiv內(nèi)の対応する「すべての選択」チェックボックスを見つけます。
• $ parentDiv.find（ 'input：not（ "。selectal"）'）。長さ：現(xiàn)在のグループのすべての非選択のすべてのチェックボックスの総數(shù)をカウントします。
• $ parentDiv.find（ '入力：checked：not（ "。selectal"）'）。長さ：現(xiàn)在のグループの非選択のすべてのチェックボックスをカウントします。
• TotalCheckboxesとCheckedCheckboxesを比較することにより、すべての通常のチェックボックスが選択されているかどうかを判斷し、それに応じて$ SelectalCheckboxの選択したステータスを更新します。

完全なjQueryコードの例

上記の2つのロジックを一緒に統(tǒng)合し、DOMのロード後に実行するようにしてください。

 $（document）.ready（function（）{
    // 1?！袱工伽皮蜻x択する/no select all」の制御ロジックチェックボックス$（ '。selectal'）。
        let selected = $（this）.is（ '：checked'）;
        $（this）.Parents（ '。myDiv'）。find（ 'input [type = "checkbox"]'）。
    }）;

    //2。通常のチェックチェックボックス$のリンケージ制御ロジック（ 'input：not（ "。selectal"）'）。
        $ parentDiv = $（this）.parents（ '。mydiv'）;
        $ selectalcheckbox = $ parentdiv.find（ '。selectal'）;

        totalcheckboxes = $ parentDiv.find（ 'input：not（ "。selectal"）'）。length;
        ret checkedCheckboxes = $ parentDiv.find（ '入力：checked：not（ "。selectal"）'）。length;

        //すべての通常のチェックボックスが選択されている場合、「すべての選択」チェックボックスを選択します（totalcheckboxes === checkedcheckboxes）{
            $ selectalcheckbox.prop（ 'checked'、true）;
        } それ以外 {
            //それ以外の場合は、「すべての選択」チェックボックスをチェックしてください$ selectalcheckbox.prop（ 'checked'、false）;
        }
    }）;
}）;

メモとベストプラクティス

• セレクターの精度：.Parents（ '。myDiv'）と.find（）の組み合わせを使用することは、操作が現(xiàn)在のグループに制限されることを保証するための鍵です。グローバルセレクターを使用して、異なるグループ間の論理的な混亂を防ぐことは避けてください。
• イベント委任：動(dòng)的にロードされたチェックボックスの場合、クリックイベントの直接バインディングが無効になる場合があります。この場合、イベントデリゲートを使用して、イベントを親要素にバインドすることをお?jiǎng)幛幛筏蓼埂?pre class="brush:php;toolbar:false"> $（document）.on（ 'click'、 '.selectall'、function（）{ / * ... * /}）; $（document）.on（ 'click'、 'input：not（ "。selectal"）'、function（）{ / * ... * /}）;

  これにより、要素がDOMに動(dòng)的に追加された後でも、イベントリスナーが適切に機(jī)能します。

• 初期の狀態(tài)処理：ページが読み込まれているときにいくつかのチェックボックスが既に選択されている場合、「すべての選択」チェックボックスの初期狀態(tài)が正しいことを確認(rèn)するために、$（document）.ready（）のチェックを?qū)g行する必要があります。たとえば、通常のチェックボックスクリックイベントを手動(dòng)でトリガーすることができます（これは最もエレガントな方法ではない場合があります）。
• ユーザーエクスペリエンス：すべてのサブチェックボックスが無効になっているときに、「すべての選択」チェックボックスの動(dòng)作を検討してください。通常、すべての子供が選択されていない場合、選択するすべてのチェックボックスも無効または非表示にする必要があります。
• パフォーマンスの考慮事項(xiàng)：多數(shù)のチェックボックスを持つ複雑なページの場合、頻繁にDOM操作がパフォーマンスに影響を與える可能性があります。ただし、ほとんどの一般的なシナリオでは、上記のアプローチはすでに十分に効率的です。パフォーマンスのボトルネックが発生した場合は、仮想DOMライブラリまたはより細(xì)かいDOM操作の最適化を使用することを検討できます。

要約します

このチュートリアルを通して、jQueryを使用してインテリジェントな「Select All」および「Anti-Select」リンケージ関數(shù)をマルチリージョンのチェックボックスに達(dá)成する方法を?qū)Wびました。コアは、明確なHTML構(gòu)造設(shè)計(jì)（一般的な親コンテナクラスと特定のクラスを使用して「すべての選択」チェックボックスを識別する）、および正確なjQueryセレクターとイベント処理ロジックを使用します。これにより、ユーザーインターフェイスのインタラクティブ性が向上するだけでなく、フロントエンド開発のチェックボックス管理タスクを大幅に簡素化します。これらのスキルを習(xí)得すると、より堅(jiān)牢でユーザーエクスペリエンスWebアプリケーションの構(gòu)築に役立ちます。