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

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

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

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

Q&A

解決済

1回答

573閲覧

jQuery 絞り込み検索:すべてを表示するボタンを作りたいです

alpaca540

総合スコア18

jQuery

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

0グッド

1クリップ

投稿2018/01/17 05:42

編集2018/01/17 06:25

###前提・実現したいこと
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]
のご質問とご回答を参考に、少しだけ変更を加えさせていただいたものです。
(ずっとやりたかった検索方法でとても有り難く、使用させて頂いております。ありがとうございます)

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

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

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

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

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

m.ts10806

2018/01/17 05:50

1つの質問内に同じ質問が繰り返し載っています。
alpaca540

2018/01/17 06:26

教えて下さってありがとうございます! 重複分を削除いたしました。
guest

回答1

0

ベストアンサー

JavaScript

1function allselect() { 2 $('.result section').fadeIn(); 3 $('#select input[type="checkbox"]').prop('checked', false); 4}

ほんとはtriggerしようとしましたが、changeがなかったので。

投稿2018/01/17 06:10

x_x

総合スコア13749

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

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

alpaca540

2018/01/17 06:30

ご回答ありがとうございます!!! おかげさまで、やりたかった事ができました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問