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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

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

解決済

2回答

13428閲覧

ブラウザバック時に、直前に入力したラジオボタン・チェックボックスの状態を表示させたい。

taroccoli

総合スコア7

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

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/11/27 08:34

編集2019/11/27 08:41

ラジオボタン(製品カテゴリ)とチェックボックス(製品サイズ)にて製品を絞り込める一覧ページを構築しました。
ラジオボタン・チェックボックスによる絞り込み実装はなんとかできたのですが、遷移先ページにてブラウザの戻るボタンで一覧ページに戻った時の表示に関し、ブラウザごとに違いが出てしまいます。

Firefox:遷移直前の製品が絞り込まれた状態を表示(理想)
Chrome:各ボタンにチェックはされているが、表示されている製品が絞り込まれていない(全表示)状態が表示。
Edge:checked指定項目以外は何も選択されていない初期状態が表示

応急処置としてwindow.onpageshowを用い、ブラウザバック=初期状態とさせて挙動を均一化させておりますが、理想としてはFirefox以外のブラウザも直前の選択状態を保持した状態で一覧ページに戻らせたいです。

色々と調べたところsessionStorageを上手く使えば実現できそうな気はしてるのですが、今回のケースに適したkeyやvalueの設定・記述方法がよく分からず、質問させていただいた次第です。

こちらの知識不足申し訳ございませんがご教示いただけますと幸いです。
何卒よろしくお願いいたします。

該当のソースコード

html

1<!--ラジオボタン・チェックボックス--> 2<form> 3 <div class="search-box category_search_box"> 4 <label> 5 <input type="radio" name="category" value="" checked="checked" class="radio_input"> 6 <span class="radio_btn">全ての製品</span></label> 7 <label> 8 <input type="radio" name="category" value="ビジネス向け" class="radio_input"> 9 <span class="radio_btn">ビジネス向け</span></label> 10 <label> 11 <input type="radio" name="category" value="一般向け" class="radio_input"> 12 <span class="radio_btn">一般向け</span></label> 13 </div> 14 <div class="search-box size_search_box"> 15 <label> 16 <input type="checkbox" name="size" value="15インチ" class="checkbox_input"> 17 <span class="checkbox_parts">15インチ</span></label> 18 <label> 19 <input type="checkbox" name="size" value="14インチ" class="checkbox_input"> 20 <span class="checkbox_parts">14インチ</span></label> 21 <label> 22 <input id="checkAll" type="checkbox" name="size" value="" class="checkbox_input"> 23 <span class="checkbox_parts">全サイズ選択</span></label> 24 </div> 25</form> 26<!--製品リスト--> 27<div class="list"> 28 <ul class="list_item" data-category="ビジネス向け" data-size="15インチ"> 29 <li><a href="製品ページA"><img src="製品画像A.jpg" alt="製品A"></a></li> 30 <li> 31 <h2>製品A</h2> 32 </li> 33 </ul> 34 <ul class="list_item" data-category="一般向け" data-size="15インチ"> 35 <li><a href="製品ページB"><img src="製品画像B.jpg" alt="製品B"></a></li> 36 <li> 37 <h2>製品B</h2> 38 </li> 39 </ul> 40 <ul class="product_item list_item" data-category="ビジネス向け" data-size="14インチ"> 41 <li><a href="製品ページC"><img src="製品画像C.jpg" alt="製品C"></a></li> 42 <li> 43 <h2>製品C</h2> 44 </li> 45 </ul> 46 <ul class="product_item list_item" data-category="一般向け" data-size="14インチ"> 47 <li><a href="製品ページD"><img src="製品画像D.jpg" alt="製品D"></a></li> 48 <li> 49 <h2>製品D</h2> 50 </li> 51 </ul> 52</div>

JavaScript

1<script> 2var searchBox = '.search-box'; 3var listItem = '.list_item'; 4var hideClass = 'is-hide'; 5var checkAll = '#checkAll'; 6var checkBox = 'input[name="size"]'; 7 8$(function() { 9 $(document).on('change', searchBox + ' input', function() { 10 search_filter(); 11 }); 12}); 13 14$( checkAll ).on('click', function() { 15 $( checkBox ).prop('checked', $(this).is(':checked') ); 16 }); 17 18 $( checkBox ).on( 'click', function() { 19 var boxCount = $( checkBox ).length; 20 var checked = $( checkBox + ':checked' ).length; 21 if( checked === boxCount ) { 22 $( checkAll ).prop( 'checked', true ); 23 } else { 24 $( checkAll ).prop( 'checked', false ); 25 } 26 }); 27 28function search_filter() { 29 $(listItem).removeClass(hideClass); 30 for (var i = 0; i < $(searchBox).length; i++) { 31 var name = $(searchBox).eq(i).find('input').attr('name'); 32 var searchData = get_selected_input_items(name); 33 if(searchData.length === 0 || searchData[0] === '') { 34 continue; 35 } 36 for (var j = 0; j < $(listItem).length; j++) { 37 var itemData = get_setting_values_in_item($(listItem).eq(j), name); 38 var check = array_match_check(itemData, searchData); 39 if(!check) { 40 $(listItem).eq(j).addClass(hideClass); 41 } 42 } 43 } 44} 45 46function get_selected_input_items(name) { 47 var searchData = []; 48 $('[name=' + name + ']:checked').each(function() { 49 searchData.push($(this).val()); 50 }); 51 return searchData; 52} 53function get_setting_values_in_item(target, data) { 54 var itemData = target.data(data); 55 if(!Array.isArray(itemData)) { 56 itemData = [itemData]; 57 } 58 return itemData; 59} 60function array_match_check(arr1, arr2) { 61 var arrCheck = false; 62 for (var i = 0; i < arr1.length; i++) { 63 if(arr2.indexOf(arr1[i]) >= 0) { 64 arrCheck = true; 65 break; 66 } 67 } 68 return arrCheck; 69} 70</script>

試したこと

取り急ぎ各ブラウザの挙動を統一したく、不本意ながらブラウザバック=ページリフレッシュの対応中。

JavaScript

1<script> 2 window.onpageshow = function(){ 3 document.getElementById("selectForm").reset(); 4 }; 5</script>

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

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

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

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

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

azuapricot

2019/11/27 12:26

ブラウザバック問題はよくあることですが、避けれるのであれば避けた方が良いですよね 戻るボタンを設置するとかブラウザバックを禁止するとか・・・。 cookieやセッションを使って実装したことはありますが管理が大変なのであまりおすすめできません
taroccoli

2019/11/28 00:40

コメントいただきありがとうございます! ブラウザバックとはあまり闘わない方がいい、ということなんですね。。 「戻るボタンを設置するとかブラウザバックを禁止するとか」との箇所に質問をさせてください。 history.back()を用いた戻るボタンを飛び先の各ページに設置し、そちらをクリックして一覧ページへ戻ってもらう仕様にすれば、絞り込み選択結果を保持したページに戻らせることが可能かも、ということでしょうか? 見当違いの質問でしたら申し訳ございませんが、お手すきの時にお返事いただけますと幸いです。
azuapricot

2019/11/28 00:54

ブラウザ毎にそろえたいとのことだったので、戻るボタンを設置して、押下時の処理を追加で記述する方が簡単なのでは?と思っただけです(ブラウザ毎に動作確認はしてないので何とも言えませんが)
guest

回答2

0

結局、社内プレビューにて「クリティカルな問題ではない」という判断にいたり、ブラウザバック=ページリフレッシュのまま進行する形になりました。
コメントいただいた皆様ありがとうございました。

投稿2019/12/10 04:00

taroccoli

総合スコア7

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

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

0

ベストアンサー

この質問内容だけでは仕様が不明瞭ですが、質問を読む限りでは sessionStorage を使うのが常套手段だろうと思います。
ただし、keyやvalueの設定・記述方法については、仕様が不明瞭なため回答できません。

ですが、keyやvalueの設定・記述方法は、そもそもわざわざ聞くようなものでもないと思います。
sessionStorage とは、とりあえずは「値の設定や取得に専用の関数を使わないといけなかったり、key と value が共に文字列に制限されていたりするだけで、中身は JavaScript のオブジェクトと同じ」と思っておけばいいです。
例えばチェックボックスの場合は、id を key、checked の値を value として保存するのが普通のやり方だろうと思います。

投稿2019/11/27 23:57

2KOH

総合スコア999

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

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

taroccoli

2019/11/28 01:50

この度はご回答いただきありがとうございます。 「仕様が不明瞭」「keyやvalueの設定・記述方法は、そもそもわざわざ聞くようなものでもない」とのことで、私の知識の無さにより貴重なお時間とお手間を使わせてしまい、誠に申し訳ございませんでした。 webStorageを扱うにあたっては知識や実力不足であることを痛感いたしました。。 「チェックボックスの場合は、id を key、checked の値を value として保存するのが普通のやり方」と具体的なアドバイス頂戴できましたので、もう少しもがいてみようかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問