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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

10067閲覧

jQueryで複数条件から絞り込み検索をしたい

Miwa

総合スコア10

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/02/18 10:25

下記のURLの絞込み検索のような、複数条件に合致した絞り込み検索を実装したいです。
下記のと違うのは、はじめに検索結果全てを表示してあり、絞り込むと絞り込んだものだけ表示するというようにしたいですが、jQueryをどのように書いたらよいかわかりません。

http://s-ej.com/sample/ajax/ajax0003/

今はこのように書いていますが、これだとどの条件にもひっかかるもの表示(or検索)になってしまっています。

lang

1<div class="selection-container"> 2 <div> 3 絞り込み検索 4 </div> 5 6 <div class="container-body"> 7 <form> 8 <p>A :</p> 9 <label><input type="checkbox" id="a01">A01</label> 10 <label><input type="checkbox" id="a02">A02</label> 11 <label><input type="checkbox" id="a03">A03</label> 12 13 <p>B :</p> 14 <label><input type="checkbox" id="b01">B01</label> 15 <label><input type="checkbox" id="b02">B02</label> 16 <label><input type="checkbox" id="b03">B03</label> 17 18 <p>C :</p> 19 <label><input type="checkbox" id="c01">C01</label> 20 <label><input type="checkbox" id="c02">C02</label> 21 <label><input type="checkbox" id="c03">C03</label> 22 </form> 23 </div> 24 25</div> 26 27<div class="answer"> 28<div>検索結果</div> 29<div class="a01 b02 c03">結果1</div> 30<div class="a02 b03 c01">結果2</div> 31<div class="a03 b01 c02">結果3</div> 32333435</div> 36

lang

1(function () { 2 $(".container-body input[type=checkbox]").click(function () { 3 if ($('#a01').prop('checked')) { 4 $('.answer .a01').show(); 5 } 6 if ($('#a02').prop('checked')) { 7 $('.answer .a02').show(); 8 } 9 if ($('#a03').prop('checked')) { 10 $('.answer .a03').show(); 11 } 12 if ($('#b01').prop('checked')) { 13 $('.answer .b01').show(); 14 } 15 if ($('#b02').prop('checked')) { 16 $('.answer .b02').show(); 17 } 18 if ($('#b03').prop('checked')) { 19 $('.answer .b03').show(); 20 } 21 if ($('#c01').prop('checked')) { 22 $('.answer .c01').show(); 23 } 24 if ($('#c02').prop('checked')) { 25 $('.answer .c02').show(); 26 } 27 if ($('#c03').prop('checked')) { 28 $('.answer .c03').show(); 29 } 30 }); 31});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

$(".container-body input[type=checkbox]").click(function () {
showResult();
});
function showResult(){
var showClass = ""
$(".container-body input[type=checked]").each(function(){
if($(this).prop('checked')) {
showClass += "."+$(this).prop('id');
}
});
$('.answer div').hide();
$('.answer '+showClass).show();
}

投稿2015/02/18 22:48

編集2015/02/19 02:00
hami

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Miwa

2015/02/19 01:54

回答ありがとうございます。 記載いただいたものを入れても動きませんでした・・・。
Miwa

2015/02/19 08:21

どれかチェックボックスをチェックすると、全て消えます。
hami

2015/02/19 08:29

hide()のところで、.answerを消しちゃっていたので、.answer div をhideするように上記編集してます。これだと<div>検索結果</div>も消えちゃうので、ここのタグは変更するなりしてください
Miwa

2015/02/19 09:07

ありがとうございます。 どうやら$('.answer '+showClass).show(); の部分が効いていないようで、チェックをすると全て消えたままです。
guest

0

自己解決

hamiさんの回答の、

lang

1$(".container-body input[type=checked]").each(function(){

lang

1$(".container-body input[type=checkbox]").each(function(){

にしたらできました。ありがとうございます!

投稿2015/02/20 02:46

Miwa

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問