###前提・実現したいこと
チェックボックスのクリックで要素を表示/非表示(絞り込み)にするスクリプトについて、
AND検索(チェックした項目すべてに該当するものを表示)は問題なく動いたのですが
OR検索(チェックした項目がひとつでも該当すれば表示)の場合どう書けばいいか教えていただければ幸いです。
////
現在→漢字・カタカナの両方にチェックを入れた時”kan kata”のタグを両方もったものしか表示されない
やりたいこと→漢字・カタカナの両方にチェックを入れた時kanもしくはkataがどちらかでも入っていれば表示される
###ソースコード
$(function (){ var $chkbxFilter_all = $('#all'); $chkbxFilter_all.click(function() { $(".sort").prop('checked',false); $chkbxFilter_all.prop('checked',true); }); $("#select label input").click(function() { $(this).parent().toggleClass("selected"); $.each($chkbxFilter_tags, function() { if($('#' + this).is(':checked')) { $("#result " + $chkbxFilter_blocks + ":not(." + this + ")").addClass('hidden-not-' + this); $chkbxFilter_all.prop('checked',false).parent().removeClass("selected"); } else if($('#' + this).not(':checked')) { $("#result " + $chkbxFilter_blocks + ":not(." + this + ")").removeClass('hidden-not-' + this); } }); //チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける if ($('.sort:checked').length == 0 ){ $chkbxFilter_all.prop('checked',true).parent().addClass("selected"); $(".sort").parent().removeClass("selected"); }; }); });
###HTML
<script> // 絞り込みに使うタグ var $chkbxFilter_tags =['kan','kata','hira']; // 絞り込み対象の要素 var $chkbxFilter_blocks = ['section'] </script> <!-- JS設定ここまで --> <h1>クリックで要素の絞り込み</h1> <!-- 絞込み要素選択ここから --> <div id="select"> <!-- 絞り込まないボタン --> <label class="selected"><input type="radio" id="all" checked="checked">絞り込まない</label> <!-- 絞込みに使うタグ --> <label><input type="checkbox" id="kan" class="sort">漢字(kan)</label> <label><input type="checkbox" id="kata" class="sort">カタカナ(kata)</label> <label><input type="checkbox" id="hira" class="sort">ひらがな(hira)</label> </div> <!-- 絞込み要素選択ここまで --> <!-- 結果 --> <div id="result"> <section class="kan hira"> <p>明日は</p> </section> <section class="kan"> <p>二月</p> </section> <section class="kata"> <p>デス</p> </section> </div>
###CSS
#result [class*="hidden-"] {display: none;}