チェックボックスの複数チェックによって要素を出し分けたい場合

今回はチェックボックスと要素（表示非表示を分けるもの）を用意してチェックボックスのチェック内容によって要素の非表示と表示を切り替える方法について紹介していきたいと思います。

もし複数チェックがついた場合は、その複数のチェック条件に合う要素を表示するようにします。

・チェックされた内容によって要素の表示非表示を切り分ける
・複数チェックされた場合はチェックされたすべての項目にひっかかったものだけ表示させる

作成方法

まずはチェックボックスを作りそれぞれvalue値を指定しておきます。

チェックボックス（html）

<ul>
<li><input id="item01" name="item" type="checkbox" value="itemOne"><label for="item01">検索1</label></li>
<li><input id="item02" name="item" type="checkbox" value="itemTwo"><label for="item02">検索2</label></li>
<li><input id="item03" name="item" type="checkbox" value="itemThree"><label for="item03">検索3</label></li>
<li><input id="item04" name="item" type="checkbox" value="itemFour"><label for="item04">検索4</label></li>       
</ul>

次は表示と非表示を切り替えるリストを用意します。

<ul class="list">
        <li class="itemOne itemThree itemThree itemFour">アイテム1</li>
        <li class="itemOne itemFour">アイテム2</li>
        <li class="itemThree">アイテム3</li>
        <li class="itemThree itemFour">アイテム4</li>
</ul>

css

offというcssがついた場合は要素が非表示になります。

.list > li.off {display: none;}

js

$(function(){
  $('ul li input').on('change', function(){

    let searchCheckVals = $('ul li input:checked').map(function(){
      return $(this).val();
    }).get();

        if(!searchCheckVals.length){
                jQuery('.list > li').removeClass('off');
        }
         
        $('.list > li').each(function(){
                let nowClass = $(this).attr('class');
               
                for (var i = 0; i < searchCheckVals.length; i++) {
                        var num = searchCheckVals.length - 1;
                               
                        if(nowClass.match(searchCheckVals[i])){
                                if(num == i){
                                        $(this).removeClass('off');
                                }else{
                                        $(this).removeClass('off');       
                                }
                                       
                        }else{
                                $(this).addClass('off');
                                break;
                        }
                }
        });
  });
});

.mapを使って配列にチェックボックスでチェックされたvalueを取得していきます。

その取得したvalue値（複数の場合も含め）と要素のクラス名が一致したら表示させます。

サンプル