要素をチェックボックスで絞り込むJSがなかなか見つからなかったので、いっそ自作しました。

チェックボックスを複数選択するとAND条件として絞り込みます。
「絞り込まない」を選択すると未選択の状態に戻ります。
このサンプルHTMLでは、section要素を絞り込んで表示しています。（tr要素などに変更可）

チェックボックスで要素を絞り込み（AND検索）

機能

• 「id=”select”」内のチェックボックスを複数選択するとAND条件として、対応する「id=”result”」内の要素を絞り込みます。
• ラジオボタン「絞り込まない」を選択すると未選択の状態に戻ります。

概要

• チェックを入れたチェックボックスid名と同名classを持たない要素に「hidden-not-XX」というclassを付与します。
• hidden-not-XXがついた要素はCSSで非表示にします。（classの前方参照）

注意

• JQueryをあらかじめ読み込んでください。
• 1ページにつき1箇所でのみ利用できます。
• CSSの前方参照を利用しているため、IE8以下では動きません。
• HTML、CSSの中級程度の知識が必要です。

使い方

###Javascript
– コピーして使用してください。改変の必要はありません。

###HTML
– コピーし、利用するページの構造に合わせてカスタマイズしてください。

• Javascript部分で、絞り込む条件となる名称を定義してください。
• Javascript部分で、絞り込まれる要素となるHTML要素を定義してください。（デフォルトはdiv）

• チェックボックス側には絞り込む条件をidとして指定します。

  • 例：<input type=”checkbox” id=”tagA” class=”sort”>
• 絞り込まれる対象の要素には、検索条件をclassで指定する必要があります。（複数可）
  • 例：<div class=”tagA tagB”>A and B</div>

###CSS
– 必須CSSの部分をコピーしてください。

改変も配布も自由にどうぞ。作者表記も不要です。その代わりサポートはありません。