jQueryでの簡易クロス検索的なサンプル

グループがわかれているチェックボックスが複数あって、
チェックが外れたものを隠していくものです。
※グループに対しての登録キーは一応複数想定。ちゃんと動くのか未検証。

HTMLはこんな感じ

   

      グループ１
      グループ１−１
      グループ１−２
      グループ１−３
   
   

      グループ２
      グループ２−１
      グループ２−２
      グループ２−３
      グループ２−４
   
   

      グループ３
      グループ３−１
      グループ３−２
   


 


   

      example1
   
   

      example2
   
   

      example3
   
   

      example3
   
   

フォーム部分は特に普通ですが、
まず、フォーム側のname属性とdata属性の名前をあわせて行きます。
例：name="group1" のときは data-group1
更に、<input value="">の値が、対応する<li data-foo="">の値と同じように書いていきます。
（キーが複数の時は続けて書いてもカンマorスペース区切りでもOK）

続いてJSです

var $searchBox = $('#search_box');
var $resultBox = $('#result_box');

$searchBox.find('input').change(function(){
 // initialize
 var checkItems = {
  'group1': [],
  'group2': [],
  'group3': []
 };
 
 // checkedチェック
 $searchBox.find('input').each(function(){
  var key = $(this).attr('name');
  if( $(this).prop('checked') ){
   checkItems[key].push( $(this).val() );
  }
 });
 
 // マッチしないものを非表示
 $resultBox.find('li').show();
 for( var key in checkItems ){
  $('[data-'+key+']').each(function(){
   var checkFlg = false;
   for( var i = 0; i < checkItems[key].length; i++ ){
    if( $(this).data(key).match(checkItems[key][i]) ){
     checkFlg = true;
     break;
    }
   }
   if( !checkFlg ) {
    $(this).hide();
   }
  });
 }
});

まず、連想配列を作っておきます。

次にそれぞれのinputがチェックされているかどうか判断して、
チェックされていたら、valを連想配列に追加していきます。

さらに、表示用のリストを一旦全て表示させておき、 チェックされている項目に対して、リストが値を持っていなかったら非表示にする。
ということをやってます。