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

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

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

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

Q&A

1回答

1766閲覧

Jqueryの絞り込み検索(OR検索)について

acochi

総合スコア6

jQuery

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

0グッド

0クリップ

投稿2017/12/04 05:50

編集2022/01/12 10:55

###前提・実現したいこと
チェックボックスのクリックで要素を表示/非表示(絞り込み)にするスクリプトについて、
AND検索(チェックした項目すべてに該当するものを表示)は問題なく動いたのですが
OR検索(チェックした項目がひとつでも該当すれば表示)の場合どう書けばいいか教えていただければ幸いです。

////
現在→漢字・カタカナの両方にチェックを入れた時”kan kata”のタグを両方もったものしか表示されない

やりたいこと→漢字・カタカナの両方にチェックを入れた時kanもしくはkataがどちらかでも入っていれば表示される

###ソースコード

$(function (){ var $chkbxFilter_all = $('#all'); $chkbxFilter_all.click(function() { $(".sort").prop('checked',false); $chkbxFilter_all.prop('checked',true); }); $("#select label input").click(function() { $(this).parent().toggleClass("selected"); $.each($chkbxFilter_tags, function() { if($('#' + this).is(':checked')) { $("#result " + $chkbxFilter_blocks + ":not(." + this + ")").addClass('hidden-not-' + this); $chkbxFilter_all.prop('checked',false).parent().removeClass("selected"); } else if($('#' + this).not(':checked')) { $("#result " + $chkbxFilter_blocks + ":not(." + this + ")").removeClass('hidden-not-' + this); } }); //チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける if ($('.sort:checked').length == 0 ){ $chkbxFilter_all.prop('checked',true).parent().addClass("selected"); $(".sort").parent().removeClass("selected"); }; }); });

###HTML

<script> // 絞り込みに使うタグ var $chkbxFilter_tags =['kan','kata','hira']; // 絞り込み対象の要素 var $chkbxFilter_blocks = ['section'] </script> <!-- JS設定ここまで --> <h1>クリックで要素の絞り込み</h1> <!-- 絞込み要素選択ここから --> <div id="select"> <!-- 絞り込まないボタン --> <label class="selected"><input type="radio" id="all" checked="checked">絞り込まない</label> <!-- 絞込みに使うタグ --> <label><input type="checkbox" id="kan" class="sort">漢字(kan)</label> <label><input type="checkbox" id="kata" class="sort">カタカナ(kata)</label> <label><input type="checkbox" id="hira" class="sort">ひらがな(hira)</label> </div> <!-- 絞込み要素選択ここまで --> <!-- 結果 --> <div id="result"> <section class="kan hira"> <p>明日は</p> </section> <section class="kan"> <p>二月</p> </section> <section class="kata"> <p>デス</p> </section> </div>

###CSS

#result [class*="hidden-"] {display: none;}

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

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

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

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

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

m.ts10806

2017/12/04 05:54

「チェックした項目がひとつでも該当すれば表示」というのは具体的には『「漢字・カタカナ・ひらがな」のいずれかひとつが選択された』という理解でよろしいですか?
acochi

2017/12/04 05:58

現在→漢字・カタカナの両方にチェックを入れた時”kan kata”のタグを両方もったものしか表示されない やりたいこと→漢字・カタカナの両方にチェックを入れた時kanもしくはkataがどちらかでも入っていれば表示される という意味でした。分かりづらくて申し訳ないです。
guest

回答1

0

classを使った例。

HTML

1<div id="result" class="nofilter"> 2<!-- 略 --> 3</div>

CSS

1#result section { 2 display: none; 3} 4 5#result.nofilter section, 6#result.kan section.kan, 7#result.kata section.kata, 8#result.hira section.hira { 9 display: block; 10}

JavaScript

1 // 処理追加。 2 var hasFilter = false; 3 for (var i = 0; i < $chkbxFilter_tags.length; i++) { 4 var key = $chkbxFilter_tags[i]; 5 var checked = $('#' + key).prop('checked'); 6 $('#result').toggleClass(key, checked); 7 hasFilter |= checked; 8 } 9 $('#result').toggleClass('nofilter', !hasFilter); 10

投稿2017/12/04 07:45

編集2017/12/04 07:46
x_x

総合スコア13749

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

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

acochi

2017/12/04 08:21

ご回答ありがとうございます。 コードを追記してみたところ、CSSがうまく動かないようでした。 もう一度初期のコードを見直してみます!
x_x

2017/12/04 08:36

acochiさんの「#result [class*="hidden-"] {display: none;}」は使っていないので(回答時にはなかったはず)、それを外せば行けるのではないでしょうか?
acochi

2017/12/04 09:10

まぎらわしくてすみません。 #result [class*="hidden-"] {display: none;}は使用せずにご回答いただいたソースのみ記載してみたのですが、絞り込み自体が動かなくなってしまっているようでした。
x_x

2017/12/04 09:15

こちらでは動作確認済みで、とくにブラウザ依存のところはないと思います。何かエラーが出ているのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問