チェックが外れたものを隠していくものです。
※グループに対しての登録キーは一応複数想定。ちゃんと動くのか未検証。
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を連想配列に追加していきます。
さらに、表示用のリストを一旦全て表示させておき、 チェックされている項目に対して、リストが値を持っていなかったら非表示にする。
ということをやってます。
