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