下記の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> 32・ 33・ 34・ 35</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});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/02/19 01:54
2015/02/19 08:21
2015/02/19 08:29
2015/02/19 09:07