###前提・実現したいこと
jQueryで画像の絞り込み検索をするにあたり
allのボタンをクリックすると、
◎ すべての画像を表示して、
◎ チェックボックスは選択されていない状態にする
(チェックされた時に、cssで色がつくようにしています)
という処理をしたいと思っております。
方法がわからず、現在はページをリロードする記述にしていますが、
画像が多いので、できればリロードしない方法を希望しております。
何か方法がありましたら、お教え頂きたくよろしくお願い致します。
###該当のソースコード
html
1<!--all(ページリロード)ボタン--> 2<input type="button" value="ALL" onclick="allselect()"> 3 4<!--画像絞り込み 選択欄--> 5<form> 6<div id="select"> 7<div id="style"><!--「style」と「color」はor検索--> 8<input type="checkbox" id="shirt"><label class="label" for="shirt">シャツ</label> 9<input type="checkbox" id="skirt"><label class="label" for="skirt">スカート</label> 10<input type="checkbox" id="another"><label class="label" for="another">その他</label> 11</div> 12<div id="color"> 13<input type="checkbox" id="white"><label class="label" for="white">ホワイト</label> 14<input type="checkbox" id="pink"><label class="label" for="pink">ピンク</label> 15<input type="checkbox" id="purple"><label class="label" for="purple">パープル</label> 16</div> 17</div> 18</form> 19 20<!--画像絞り込み 結果表示--> 21<div class="result"> 22<section class="skirt white"><img src="image/sample.jpg" ></section> 23<section class="shirt pink"><img src="image/sample2.jpg" ></section> 24〜<!--画像続く-->
css
1input[type=checkbox] { 2 display: none; 3} 4#select label{ 5 display: block; 6 background-color:#ccc; 7 color: #333; 8} 9#select input:checked + label { 10 color:#fff; 11 background-color: #333; 12}
javascript
1<script>//header内 2function allselect(){ 3 location.reload(true) 4} 5</script> 6 7<script>//body内 8$(function(){ 9 $('.result section').show(); 10$('#style,#color').find('input').on('click',function(){ 11 $('.result section').hide(); 12 $('#style [type=checkbox]:checked').each(function(){ 13 var checkstyle=$(this).prop('id'); 14 $('#color [type=checkbox]:checked').each(function(){ 15 var checkcolor=$(this).prop('id'); 16 $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor);}).show(); 17 }); 18}); 19 20 if($('#style [type=checkbox]:checked').length==0){ 21 $('#color [type=checkbox]:checked').each(function(){ 22 var checkcolor=$(this).prop('id'); 23 $('.result section').filter(function(){return $(this).hasClass(checkcolor);}).show(); 24 }); 25 }; 26 if($('#color [type=checkbox]:checked').length==0){ 27 $('#style [type=checkbox]:checked').each(function(){ 28 var checkstyle=$(this).prop('id'); 29 $('.result section').filter(function(){return $(this).hasClass(checkstyle);}).show(); 30 }); 31 }; 32 }).trigger('change'); 33}); 34</script>
###補足情報
絞り込み検索は、
[https://teratail.com/questions/85488]
のご質問とご回答を参考に、少しだけ変更を加えさせていただいたものです。
(ずっとやりたかった検索方法でとても有り難く、使用させて頂いております。ありがとうございます)
回答1件
あなたの回答
tips
プレビュー