jQueryでチェックボックスを使ったor条件検索

Question

###前提・実現したいこと
チェックボックスとリストを使用した簡単なor条件検索を作成したいと思っていますが、うまくいきません。
JSFiddleサンプル
＜挙動例＞
checkbox01 と checkbox02 にチェックを入れた際
・checkbox01 または checkbox02 どちらかに当てはまるli要素は表示される。
・checkbox01 かつ checkbox02 両方に当てはまるli要素は表示される。
・以上二つに当てはまらない(チェックされていない)liは非表示

###該当のソースコード

<input type="checkbox" id="checkbox01" data-target=".e1"/>
<input type="checkbox" id="checkbox02" data-target=".e2"/>
<input type="checkbox" id="checkbox03" data-target=".e3"/>

<ul id="list">
  <li class="is-selected e1">1</li>
  <li class="is-selected e1 e2">1,2</li>
  <li class="is-selected e1 e3">1,3</li>
  <li class="is-selected e2">2</li>
  <li class="is-selected e3">3</li>
  <li class="is-selected e2 e3">2,3</li>
  <li class="is-selected e1 e2 e3">1,2,3</li>
</ul>

#list li {
		display: none;
	}
#list .is-selected {
		display: block;
	}

$(function() {
var $checkBox = $('input[type="checkbox"]');
 var flag = ($checkBox.filter(':checked').length > 0) ? 'addClass' : 'removeClass';
  $checkBox.on("change", function() {
    $($(this).attr('data-target'))[flag]('is-selected');
    })
});

何卒よろしくお願いいたします。

Answer 1

$(function(){
  $('#checkbox01,#checkbox02,#checkbox03').on('change',function(){
    $('#list li').removeClass('is-selected');
    ['#checkbox01','#checkbox02','#checkbox03'].forEach(function(i){
      if($(i).prop('checked')) $($(i).data('target')).addClass('is-selected');
    })
    }).eq(0).change();
});

追記

data-targetを持っているチェックボックスをキーにするならこんな感じでも

$(function(){
  var selector='input[type=checkbox][data-target]'
    $(selector).on('change',function(){
      $('#list li').removeClass('is-selected');
      $(selector).filter(':checked').each(function(){
        $('#list').find($(this).data('target')).addClass('is-selected');
      });
    }).eq(0).change();
});

Comments

[hibikikudo]

ありがとうございます。二種類の回答を示していただき大変勉強になりました。