jQuery実装マルチリージョンチェックボックスリンケージコントロール：すべてを選択し、逆選択機能ガイド

このチュートリアルでは、jQueryを使用して、複数の領域のチェックボックスのすべておよび反選択関数を実装する方法を詳細に説明しています。独立したエリアのすべてのチェックボックスを設定し、そのステータスの変更を聞くことにより、そのエリア内のすべてのサブチェックボックスの選択したステータスを自動的に同期します。同時に、ユーザーインターフェイスロジックの整合性と一貫性を確保するために、エリア内のサブチェックボックスのステータスが変更されたときに「すべてを選択する」チェックボックスのステータスを動的に更新する方法もカバーします。

コアコンセプトとHTML構造の最適化

複雑なフォームまたはデータ表示シナリオでは、多くの場合、チェックボックスのセットで「すべてを選択」または「すべての選択」操作を実行する必要があります。ページに複数の独立したチェックボックスグループがある場合、各グループには独自の「すべての選択」機能が必要であり、互いに影響を与えません。この関数を実装するコアは次のとおりです。

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

上記の原則に基づいて、元のHTML構造を最適化し、MyDIVクラスを導入して独立したチェックボックスグループを識別し、SelectAllクラスを導入して「すべての選択」チェックボックスを識別します。

  
<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>上記のコードでは、各独立したチェックボックスグループをMyDIVクラスでラップし、各グループの「すべての選択」チェックボックスにSelectAllクラスを追加します。</p>
<h3> jQuery実装ロジック</h3>
<p>次に、jQueryを使用して、それぞれ2つのメインイベントハンドラーを作成します。「すべての選択」チェックボックスと通常のチェックボックスのクリックイベントを処理します。</p>
<h4> 1。「すべてを選択する/選択するすべての選択」チェックボックスの制御</h4>
<p>ユーザーが「すべての選択」チェックボックスをクリックすると、現在の選択されたステータスに従って、同じグループ内の他のすべてのチェックボックスの選択したステータスを同期する必要があります。</p>
<pre class="brush:php;toolbar:false"> $（'。SELECTALL '）。on（' Click '、function（）{
  //現在の「選択」チェックボックスの選択したステータスを取得します。

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

説明する：

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

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

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

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

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

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

説明する：

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

完全なjQueryコードの例

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

 $（document）.ready（function（）{
    // 1。「すべてを選択する/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（）の組み合わせを使用することは、操作が現在のグループに制限されることを保証するための鍵です。グローバルセレクターを使用して、異なるグループ間の論理的な混乱を防ぐことは避けてください。
• イベント委任：動的にロードされたチェックボックスの場合、クリックイベントの直接バインディングが無効になる場合があります。この場合、イベントデリゲートを使用して、イベントを親要素にバインドすることをお勧めします。

   $（document）.on（ 'click'、 '.selectall'、function（）{ / * ... * /}）;
  $（document）.on（ 'click'、 'input：not（ "。selectal"）'、function（）{ / * ... * /}）;

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

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

要約します

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