質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.19%

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

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 3,618
ministop

ministop

score 17

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(); 
        });

    }

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4 件

link

checkベストアンサー

+3

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

$(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');
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/25 11:56

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

    説明不足で大変申し訳ないのですが、
    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

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

    キャンセル

  • 2017/07/25 12:10 編集

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

    キャンセル

  • 2017/07/25 14:52

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

    キャンセル

link

+2

チェックボックスの状態を調査して、例えば、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();// 絞り込みの結果残ったものを表示する

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+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/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/25 11:55

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

    説明不足で大変申し訳ないのですが、
    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

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

    キャンセル

link

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る