jQueryで複数条件の絞込み検索

Question

jQueryを使って絞込み検索を作りたいです。
下記コードでor検索はできるようになりました。

全てをor検索ではなく、各hoge-1、hoge-2はor検索、hoge-1とhoge-2間はand検索にしたいです。

例えば、a-2、b-1、b-2にチェックを入れた場合、hogehogeは表示せずにhogeだけ表示したいです。わかりにくくて申し訳ないですがよろしくお願いします。

https://jsfiddle.net/yx92x5bv/1/

###HTML

<form>
		<div class="test">
            <div class="hoge-1">
							<input type="checkbox" id="a-1"><label class="label" for="a-1">a-1</label>
							<input type="checkbox" id="a-2"><label class="label" for="a-2">a-2</label>
							<input type="checkbox" id="a-3"><label class="label" for="a-3">a-3</label>
            </div>
			<div class="hoge-2">
							<input type="checkbox" id="b-1"><label class="label" for="b-1">b-1</label>
							<input type="checkbox" id="b-2"><label class="label" for="b-2">b-2</label>
							<input type="checkbox" id="b-3"><label class="label" for="b-3">b-3</label>
           </div>			
		</div>
</form>
<div class="result">
		<section class="a-2 b-1">
          <h2>hoge</h2>
        </section>
        <section class="a-1 b-2">
          <h2>hogehoge</h2>
        </section>
        <section class="a-3 b-3">
          <h2>hogehogehoge</h2>
        </section>
</div>

###jQuery

	$(".test input[type=checkbox]").click(function () { 
	  showResult(); 
	}); 
	function showResult(){ 
	  var showClass = [];
	  $(".test input[type=checkbox]").each(function(){ 
		if($(this).prop('checked')) { 
			showClass.push($(this).prop('id'));
		} 
	  }); 
	  $('.result section').hide(); 
		$.each(showClass, function(i, text){
			 $('.result .'+text).show(); 
		});
	 
	}

Answer 1

ざっとこんな感じでどうでしょうか？

$(function(){
  $('.hoge-1,.hoge-2').find('[type=checkbox]').on('change',function(){
    $('.result section').hide();
    $('.hoge-1').find('[type=checkbox]:checked').each(function(){
      var hoge1=$(this).attr('id');
      $('.hoge-2').find('[type=checkbox]:checked').each(function(){
        var hoge2=$(this).attr('id');
        $('.result section').filter(function(){return $(this).hasClass(hoge1) && $(this).hasClass(hoge2);}).show();
      });
    });
  }).trigger('change');
});

<form>
<div class="test">
<div class="hoge-1">
<input type="checkbox" id="a-1"><label class="label" for="a-1">a-1</label>
<input type="checkbox" id="a-2"><label class="label" for="a-2">a-2</label>
<input type="checkbox" id="a-3"><label class="label" for="a-3">a-3</label>
</div>
<div class="hoge-2">
<input type="checkbox" id="b-1"><label class="label" for="b-1">b-1</label>
<input type="checkbox" id="b-2"><label class="label" for="b-2">b-2</label>
<input type="checkbox" id="b-3"><label class="label" for="b-3">b-3</label>
</div>            
</div>
</form>
<div class="result">
<section class="a-2 b-1">
<h2>hoge</h2>
</section>
<section class="a-1 b-2">
<h2>hogehoge</h2>
</section>
<section class="a-3 b-3">
<h2>hogehogehoge</h2>
</section>
</div>

追記

aにチェックがない場合bだけで判断、bにチェックがない場合aだけで判断という条件を追加

$(function(){
  $('.hoge-1,.hoge-2').find('[type=checkbox]').on('change',function(){
    $('.result section').hide();
    $('.hoge-1 [type=checkbox]:checked').each(function(){
      var hoge1=$(this).attr('id');
      $('.hoge-2 [type=checkbox]:checked').each(function(){
        var hoge2=$(this).attr('id');
        $('.result section').filter(function(){return $(this).hasClass(hoge1) && $(this).hasClass(hoge2);}).show();
      });
    });
    if($('.hoge-1 [type=checkbox]:checked').length==0){
      $('.hoge-2 [type=checkbox]:checked').each(function(){
        var hoge2=$(this).attr('id');
        $('.result section').filter(function(){return $(this).hasClass(hoge2);}).show();
      });
    };
    if($('.hoge-2 [type=checkbox]:checked').length==0){
      $('.hoge-1 [type=checkbox]:checked').each(function(){
        var hoge1=$(this).attr('id');
        $('.result section').filter(function(){return $(this).hasClass(hoge1);}).show();
      });
    };
  }).trigger('change');
});

Comments

[ministop]

ご回答いただきありがとうございます。

説明不足で大変申し訳ないのですが、
a-1,a-2,a-3(b-1,b-2,b-3)の間では、or検索ができるようにしたいです。
aとbにどちらもチェックが入っていた場合、aとbのand検索にしたいです。

例：
● a-1にチェック
hogehoge
● a-1,a-2にチェック
hoge,hogehoge
● a-1,a-2,b-1にチェック
hoge
● b-2にチェック
hogehogehoge

ご回答いただければ幸いです。

[yambejp]

aにチェックがない場合はbだけで判断し、bにチェックがない場合はaだけで判断するということですね？
追記しておきました

[ministop]

無事に思ってた通りに動作しました。
ありがとうございます。

Answer 2

showResult(); // 初期全てを非表示にするため

$(".test input[type=checkbox]").click(function () { 
  showResult(); 
}); 

function showResult(){
  var $section = $('section');
  var $checked_a = $('[id^="a"]:checked');
  var $checked_b = $('[id^="b"]:checked');
  
  var _filter = function ($checked) {
    return function () {
      var $this = $(this);
      return Array.prototype.some.call($checked, function (checkbox) {
        return $this.hasClass(checkbox.getAttribute('id'));
      });
    }
  };
  
  // 一旦すべてのsectionを非表示にする
  $section.hide();

  // a、bの全てが未選択の場合、処理中断
  if (($checked_a.length === 0) && ($checked_b.length === 0)) {
    return;
  }

  // チェックボックスのid属性の値とsectionのクラス属性の値でフィルタリング
  if ($checked_a.length > 0) {
  	$section = $section.filter(_filter($checked_a));
  }

  if ($checked_b.length > 0) {
  	$section = $section.filter(_filter($checked_b));
  }
  
  $section.show();
}

https://jsfiddle.net/takmatz/psbz54ad/

---

修正前

showResult(); // 初期全てを非表示にするため

$(".test input[type=checkbox]").click(function () { 
  showResult(); 
}); 

function showResult(){
  var $section = $('section');
  var $checked_a = $('[id^="a"]:checked');
  var $checked_b = $('[id^="b"]:checked');
  
  var _filter = function ($checked) {
    return function () {
      var $this = $(this);

      return Array.prototype.some.call($checked, function (checkbox) {
        return $this.hasClass(checkbox.getAttribute('id'));
      });
    }
  };
  
  // 一旦すべてのsectionを非表示にする
  $section.hide();

  // チェックボックスのid属性の値とsectionのクラス属性の値でフィルタリング
  $section
    .filter(_filter($checked_a))
    .filter(_filter($checked_b))
    .show();
}

https://jsfiddle.net/takmatz/jpb08vvp/

Comments

[ministop]

ご回答いただきありがとうございます。

説明不足で大変申し訳ないのですが、
a-1,a-2,a-3(b-1,b-2,b-3)の間では、or検索ができるようにしたいです。
aとbにどちらもチェックが入っていた場合、aとbのand検索にしたいです。

例：
● a-1にチェック
hogehoge
● a-1,a-2にチェック
hoge,hogehoge
● a-1,a-2,b-1にチェック
hoge
● b-2にチェック
hogehogehoge

ご回答いただければ幸いです。

Answer 3

チェックボックスの状態を調査して、例えば、a-2、b-1、b-2にチェックを入れた場合、下記のようなデータを作ります。

var data = {
	'hoge-1' : ".a-2",
	'hoge-2' : ".b-1 , .b-2"
};

つまりカテゴリごとに分けたor条件を作るわけですね。
そしてそのデータを元にfilter()を使えば、and絞り込みができます。

var sec = $("section");
$.each(data,function(key,value){
	sec = sec.filter(value);// カテゴリごとに絞り込んでいく
});
$("section").hide();// いったん全部消去して…
sec.show();// 絞り込みの結果残ったものを表示する

Answer 4

挙がった質問から辿って拝見しました。
こういう質問自分も参加したかったです。

配列の直積を作って解決するパターンを作りましたので参考になれば。
https://jsfiddle.net/sousuke/pLmnwqzv/1/