前提・実現したいこと
実例集の絞り込み検索ができるページを作成しています。
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が離れているとできないことなのかも検討がつきません。
どうぞよろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー