複数選択ボックスすべて選択

1150 ワード

本文はjQuery実現CheckBox全選、全選原文と原文評論を参考にした.
必要:
  • 複数選択ボックスには、すべて選択された選択ボックスが設定されます.すべて選択した選択ボックスが選択されている場合、残りのすべての選択ボックスが選択されます.選択した選択ボックスが選択されていない場合(選択ボックスをクリックした場合)は、残りの選択ボックスは選択されません.
  • 残りの選択ボックスが選択されている場合、選択されている選択ボックスは自動的に選択され、残りの選択ボックスが1つ以上選択されていない場合(残りの選択ボックスをクリックした場合)、選択されている選択ボックスは選択されません.

  • 実装方法:
    需要1の場合、選択した選択ボックスにclickイベント処理関数を追加できます.
    $("#select-all").click(function(){
      $("input[name='select']").prop("checked",this.checked);
    });

    prop:要素の属性が属性名のみ(属性名が存在する場合に有効)または属性がtrueとfalseの2つの値のみである場合、propを使用します.
    需要2の場合、選択肢が多くない場合に、残りのすべての選択肢のクリックイベントをリスニングできます.
    $("input[name='select']").click(function(){
      var $subs=$("input[name='select']");
      $("#select-all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
    });

    filter:条件に基づいて呼び出し者の集合をフィルタリングし、この例では選択した状態をフィルタリングするための複数選択ボックスです.
    「:checked」:選択した状態のinput要素を選択します.jqueryセレクタについてはjQueryリファレンスマニュアル-セレクタを参照してください.
    最後に、選択した選択ボックスにnameプロパティを付けることはできません(少なくともサブアイテムと同じnameプロパティではありません).