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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

1773閲覧

radioボタンの大カテゴリを選択すると小カテゴリのチェックボックスが外れる仕組みを作る。

Uicco

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2019/04/17 08:29

編集2019/04/17 23:49

前提・実現したいこと

実例集の絞り込み検索ができるページを作成しています。

6つのタブ[大カテゴリ] (radioボタンで作成) どれかをクリックすると
その下に[大カテゴリ]に付随した[小カテゴリ] (チェックボックスで作成) が展開します。

[大カテゴリ]をクリックするだけでも絞り込みが実行され、
更に細かい情報を絞り込むために[小カテゴリ]を用意したのですが、
[小カテゴリ]のチェックをつけ、別の[大カテゴリ]タブをクリックすると
元々の[小カテゴリ]につけていたチェックが外れる仕組みを作りたいです。

他の[大カテゴリ]タブをクリックすると・・・なので
jQueryのクリックインベントリでどうにかできるのではと考えているのですが
具体的な解決策がわかりません。

絞り込み検索は既に実装できているのですが、
絞り込みにあたってもっと便利にできればと思い質問させて頂きました。

発生している問題・エラーメッセージ

「全てクリアボタン」を作成して押してみても
そのとき表示されている[小カテゴリ]のチェックボックスしか解除されません。

該当のソースコード

HTML

1 <div id="works-contents-inner"> 2 <div id="search-menu"> 3 <form> 4 <ul class="tab"> 5 <li> 6 <div class="search-box"> 7 <input type="radio" name="kind" value="大カテゴリ名1" id="s"> 8 <label for="s" class="label">大カテゴリ名1</label> 9 </div> 10 </li> 11 12 ~中略~ 13 14 <li> 15 <div class="search-box"> 16 <input type="radio" name="kind" value="大カテゴリ名6" id="re"> 17 <label for="re" class="label">大カテゴリ名6</label> 18 </div> 19 </li> 20 </ul> 21 </form> 22 23 <div class="tabContent"> 24 <form> 25 <div class="search-box"> 26 <input type="checkbox" name="type" value="小カテゴリ名1" id="s1"> 27 <label for="s1" class="label">小カテゴリ名1</label> 28 <input type="checkbox" name="type" value="小カテゴリ名2" id="s2"> 29 <label for="s2" class="label">小カテゴリ名2</label> 30 </div> 31 </form> 32 </div> 33 34 ~中略~ 35 36 <div class="tabContent"> 37 <form> 38 <div class="search-box"> 39 <input type="checkbox" name="type" value="小カテゴリ名18" id="re1"> 40 <label for="re1" class="label">小カテゴリ名18</label> 41 <input type="checkbox" name="type" value="小カテゴリ名19" id="re2"> 42 <label for="re2" class="label">小カテゴリ名19</label> 43 </div> 44 </form> 45 </div> 46 </div> 47 </div> 48

jQuery

1$(function() { 2 $(".tab li").click(function() { 3 var num = $(".tab li").index(this); 4 $(".tabContent").removeClass('active'); 5 $(".tabContent").eq(num).addClass('active'); 6 $(".tab li").removeClass('active'); 7 $(this).addClass('active') 8 }); 9 }); 10     var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 11 var listItem = '.modal-link'; // 絞り込み対象のアイテム 12 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 13 14 $(function() { 15 // 絞り込み項目を変更した時 16 $(document).on('change', searchBox + ' input', function() { 17 search_filter(); 18 }); 19 }); 20 21 /** 22 * リストの絞り込みを行う 23 */ 24 function search_filter() { 25 // 非表示状態を解除 26 $(listItem).removeClass(hideClass); 27 for (var i = 0; i < $(searchBox).length; i++) { 28 var name = $(searchBox).eq(i).find('input').attr('name'); 29 // 選択されている項目を取得 30 var searchData = get_selected_input_items(name); 31 // 選択されている項目がない、またはALLを選択している場合は飛ばす 32 if (searchData.length === 0 || searchData[0] === '') { 33 continue; 34 } 35 // リスト内の各アイテムをチェック 36 for (var j = 0; j < $(listItem).length; j++) { 37 // アイテムに設定している項目を取得 38 var itemData = $(listItem).eq(j).data(name); 39 // 絞り込み対象かどうかを調べる 40 if (searchData.indexOf(itemData) === -1) { 41 $(listItem).eq(j).addClass(hideClass); 42 } 43 } 44 } 45 } 46 47 /** 48 * inputで選択されている値の一覧を取得する 49 * @param {String} name 対象にするinputのname属性の値 50 * @return {Array} 選択されているinputのvalue属性の値 51 */ 52 function get_selected_input_items(name) { 53 var searchData = []; 54 $('[name=' + name + ']:checked').each(function() { 55 searchData.push($(this).val()); 56 }); 57 return searchData; 58 } 59 var radio_map = {}; 60 $('input[type="radio"]').click(function() { 61 var input = $(this); 62 var name = input.attr('name'); 63 if (radio_map[name] === input.val()) { 64 radio_map[name] = null; 65 input.attr('checked', false); 66 } else { 67 radio_map[name] = input.val(); 68 } 69 }).each(function() { 70 var input = $(this); 71 if (input.prop('checked')) { 72 var name = input.attr('name'); 73 radio_map[name] = input.val(); 74 } 75 });

試したこと

何個か「全てクリアボタン」を作成しましたが、おそらくformが離れているからか動きませんでした。
そもそもformが離れているとできないことなのかも検討がつきません。

どうぞよろしくお願い致します。

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

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

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

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

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

x_x

2019/04/17 08:58

まず、「[大カテゴリ]に付随した[小カテゴリ] (チェックボックスで作成) が展開」というのが再現できないのですが、CSS で実現しているのでしょうか?
Uicco

2019/04/17 23:48

申し訳ございません。 該当箇所のjsが漏れておりました。 追加いたしましたのでご確認お願いします!
guest

回答1

0

ベストアンサー

こうですかね?

javascript

1$(function(){ 2 $('.tab [name=kind]').on('change',function(){ 3 $('.tabContent [name=type]').prop('checked',false); 4 }); 5});

投稿2019/04/17 08:53

編集2019/04/17 08:53
yambejp

総合スコア114572

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

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

Uicco

2019/04/17 23:52

yambejp様 ありがとうございます。 記述に追加してみたところ思い通りの動作になりました。 propを使うというもの調べている課程で出てきたのですが、 どう組み込めばいいのかわかりませんでした。 助かりました、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問