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

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

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

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

HTML5

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

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

7798閲覧

ラジオボタンのチェック状態をリロード後も保持したい

GenkiSugiyama

総合スコア86

CSS3

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

HTML5

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

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/02/19 16:57

編集2020/02/20 05:13

ECサイトの送付先選択画面にて下記のようなラジオボタンを用意しています。
イメージ説明

HTML

1<div class="info addr_info"> 2 <h2>お届け先の入力</h2> 3 <ul class="addr_choice radio_list"> 4 <li> 5 <label id="optionLbl01"> 6 <input type="radio" name="receiver_user_type" id="receiver_user_type_X" value="X" onclick="copydata()"> 7 <span class="radioLabel">注文者の住所にお届けする</span> 8 </label> 9 </li> 10 <li> 11 <label id="optionLbl01"> 12 <input type="radio" name="receiver_user_type" id="receiver_user_type_E" value="E" onclick="javscript:copydata();showReceiverForm();"> 13 <span class="radioLabel">注文者の情報を元にお届け先を編集する</span> 14 </label> 15 </li> 16 <li> 17 <label id="optionLbl01"> 18 <input type="radio" name="receiver_user_type" id="receiver_user_type_N" value="N" onclick="addrclick()"> 19 <span class="radioLabel">新しいお届け先を入力する</span> 20 </label> 21 </li> 22 </ul> 23</div>

##実現したいこと

下二つの選択肢をチェックすると送付先入力フォームが表示され、編集・新規入力ができるようになっています。
入力した情報がエラーのまま次の画面に進もうとすると、バリデーションでこのページにリダイレクトするようにしたいのですが、その際ラジオボタンのチェック状態を維持したままリダイレクトさせたいです。
(フォームを表示したままの状態でリダイレクトさせたいいため)

##試したこと
本サイトに同様の質問があったのでこちらのlocalStrageを使ってチェックボタンの値を保持しようとしたのですがうまくいきませんでした。

下記はラジオボタンが配置されているhtmlに記述したコードです。

HTML

1<script> 2 window.addEventListener('DOMContentLoaded', function (e) { 3 var status=localStorage.getItem('status'); 4 console.log(status); 5 if(x=document.querySelector('[name=receiver_user_type][value='+status+']')) x.checked=true; 6 [].forEach.call(document.querySelectorAll('[name=receiver_user_type]'),function(x){ 7 x.addEventListener('change',function(e){ 8 localStorage.setItem('status',e.target.value); 9 console.log(e.target.value); 10 }); 11 }); 12 }); 13</script>

コンソールとデベロッパーツールで取れている値を確認してみたのですが、リロード時にそれまで保持していた値がリセットされたような動きになりました。
イメージ説明

リロードしても保存できる方法についてご教示いただけると大変助かります。

よろしくお願いいたします。

2019/02/20追記
ユーザー関数を記述しているjsファイルの内容を記載します。

JavaScript

1function copydata() { 2 var copydata_value = ""; 3 for(i=0;i<document.form1.receiver_user_type.length;i++){ 4 if(document.form1.receiver_user_type[i].checked == true){ 5 copydata_value = document.form1.receiver_user_type[i].value; 6 } 7 } 8 if (copydata_value == 'X' || copydata_value == 'E') { 9 document.form1.receiver.value=document.form1.sender.value; 10 document.form1.receiver_kana.value=document.form1.sender_kana.value; 11 12 document.form1.receiver_office_name.value = document.form1.office_name.value; 13 document.form1.receiver_office_name_kana.value = document.form1.office_name_kana.value; 14 document.form1.receiver_office_dept_name.value = document.form1.office_dept_name.value; 15 16 document.form1.emergency2_1.value=document.form1.emergency1_1.value; 17 document.form1.emergency2_2.value=document.form1.emergency1_2.value; 18 document.form1.emergency2_3.value=document.form1.emergency1_3.value; 19 20 document.form1.post1.value=document.form1.sender_post1.value; 21 document.form1.post2.value=document.form1.sender_post2.value; 22 changeReceiverArea(document.form1.sender_area.value); 23 document.form1.address.value=document.form1.sender_addr.value; 24 document.form1.address2.value=document.form1.sender_addr2.value; 25 }else { 26 document.form1.receiver.value=""; 27 document.form1.receiver_kana.value=""; 28 document.form1.receiver_office_name.value = ''; 29 document.form1.receiver_office_name_kana.value = ''; 30 document.form1.receiver_office_dept_name.value = ''; 31 set_null_emergency(2); 32 // set_null_emergency(3); 33 document.form1.post1.value=""; 34 document.form1.post2.value=""; 35 changeReceiverArea(0); 36 document.form1.address.value=""; 37 document.form1.address2.value=""; 38 } 39}

Javascript

1function addrclick() { 2 var addrclick_value = ""; 3 for(i=0;i<document.form1.receiver_user_type.length;i++){ 4 if(document.form1.receiver_user_type[i].checked == true){ 5 addrclick_value = document.form1.receiver_user_type[i].value; 6 } 7 } 8 9 if (addrclick_value == "A") { 10 // $('.js_modal').fadeIn(); 11 document.form1.receiver.value = ""; 12 document.form1.receiver_kana.value = ""; 13 set_null_emergency(2); 14 document.form1.address.value = ""; 15 document.form1.address2.value = ""; 16 changeReceiverArea(0); 17 document.form1.post1.value = ""; 18 document.form1.post2.value = ""; 19 20 return false; 21 } else { 22 document.form1.receiver.value = ""; 23 document.form1.receiver_kana.value = ""; 24 set_null_emergency(2); 25 document.form1.address.value = ""; 26 document.form1.address2.value = ""; 27 changeReceiverArea(0); 28 document.form1.post1.value = ""; 29 document.form1.post2.value = ""; 30 } 31 32 document.form1.receiver_office_name.value = ''; 33 document.form1.receiver_office_name_kana.value = ''; 34 document.form1.receiver_office_dept_name.value = ''; 35}

JavaScript

1function showReceiverForm() { 2 jQuery('.receiver_address').show(); 3}

JavaScript

1jQuery(function(){ 2 jQuery('input[name="receiver_user_type"]').click(function(){ 3 if(this.value == 'X'){ 4 jQuery('.receiver_address').hide(); 5 }else{ 6 jQuery('.receiver_address').show(); 7 } 8 }); 9 10 jQuery('#receiver_user_type_X').trigger('click'); 11 jQuery.fn.autoKana('#sender_name', '#sender_kana', {katakana : true}); 12 jQuery.fn.autoKana('#receiver_name', '#receiver_kana', {katakana : true}); 13 jQuery.fn.autoKana('#sender_office_name', '#sender_office_name_kana', {katakana : true}); 14 jQuery.fn.autoKana('#receiver_office_name', '#receiver_office_name_kana', {katakana : true}); 15});

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

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

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

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

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

hoshi-takanori

2020/02/19 18:28

それはリロード時の状態保持ではなく、画面遷移時の状態引き継ぎですね。ちなみに、「次の画面に進む」というのはどのように実装されてますか?
m.ts10806

2020/02/19 21:01

copydata() ,showReceiverForm(),addrclick()の実装は今回の要件のみを達成したいと考えたときに必要でしょうか。必要でしたらコードをご提示ください。
GenkiSugiyama

2020/02/20 02:55

hoshi-takanori 様 次の画面に進むは、上記gifのはじめの方に画面下に表示されている「次へ」ボタンが押されるとsubmitされる仕組みになっています。
GenkiSugiyama

2020/02/20 03:16

m.ts10806 様 ユーザー関数のコードを追記いたしました。
guest

回答2

0

ベストアンサー

X で再設定しています……

jQuery

1 jQuery('#receiver_user_type_X').trigger('click');

投稿2020/02/20 08:58

x_x

総合スコア13749

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

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

GenkiSugiyama

2020/02/21 14:13

ご指摘ありがとうございます。この処理をコメントアウトし試してみたら上手く動きました! コードの見落としに気づかず、、、大変助かりました!
guest

0

おそらく仕組みとしてはできているはず
タグにonclickで付加されたユーザー関数がなにか
おかしなことをしているのだと思います

投稿2020/02/20 00:17

yambejp

総合スコア116730

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

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

GenkiSugiyama

2020/02/20 03:16

yambejp 様 ご回答ありがとうございます! ユーザー関数のコードも追加したのでご確認いただけるとありがたいです。
yambejp

2020/02/20 04:21

よくわからないけどHTML消しました?
GenkiSugiyama

2020/02/20 05:14

修正時、一度文字数オーバーしてしまったので最初に記載していたコードまで削除してしまっていました。 先ほど消してしまったコードを再度掲載しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問