ブラウザの更新ボタンを押すとラジオボタンのチェック状態が異なる理由

ラジオボタンを３つほど作り、最初のボタンにはcheckedを記入しています。
つまり最初から選択されている状態、のはずなのですが、
ブラウザを更新させると外れていたり、更新前にチェックした状態と変わっていなかったりします。
一番最初にHTMLをブラウザで開いたときはプログラム通りにチェックが入っているのですが。

症状はブラウザによって違います。

Microsoft Edge
Chrome
Firefox

これらのブラウザで試してみました。
HTMLをブラウザで開いて、適当にボタンをポチポチチェックします。
ブラウザを更新します。

Microsoft Edgeの場合、
チェックが全部外れてます。

Firefoxの場合、
更新前にチェックした状態のままです。

唯一まともだったのがChromeです。
更新するとちゃんと一番最初の状態（checkedは選択されている）に戻っていました。

質問ですが、
それぞれを更新させると、何故ブラウザよってチェック状態が違うのですか？
できれば全てChromeと同じ様に動作して欲しいところです。
それを実現させることができるソースコードをご存知でしたら教えてください。

…htmlをサーバーに上げると改善したりしますか？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<input type="radio" name="radio1" checked >ボタン１
		<input type="radio" name="radio1" >ボタン２
		<input type="radio" name="radio1" >ボタン３
		<br>
		<input type="radio" name="radio2" checked >ボタン１
		<input type="radio" name="radio2" >ボタン２
		<input type="radio" name="radio2" >ボタン３
	</body>
</html>

m.ts10806

2018/07/31 06:03

実際のコードを提示してください。現在の内容だけでは誰も再現確認がとれません。

_L9u7c4i0a

2018/07/31 06:38

すみませんでした＞＜先ほどソースコードを追加しましたので。ご指摘ありがとうございました。

m.ts10806

2018/07/31 06:42

DECTYPE ←これは修正された方が。正確にはDOCTYPEです。構文の宣言ミスは思わぬバグを生む可能性があります。他にもないか確認してください。正確に再現確認がとれない可能性もありますので

_L9u7c4i0a

2018/07/31 06:55

ありがとうございます。気付いていませんでした＞＜まさか４文字目から記入ミスがあるとは；

行動規範の内容に同意します

回答4件

「mts10806」さんの回答にあるように各ブラウザのF5ボタンの仕様によりますので違いが出てきます。

全てのブラウザで「スーパーリロード」を掛けると、リセットされます。

どのブラウザで見ても良いように「再読込ボタン」を設置するのも対処方法のひとつと思います。

参考
再読込ボタンを作る方法

文章を一部編集しました。

投稿2018/07/31 07:52

編集2018/07/31 07:54

yoshinavi

総合スコア3523

_L9u7c4i0a

2018/07/31 11:28

別のサイトでもたまに、再度読み込みボタンを見かけます。こういう問題に対処するために各自リセット機能をつけていたのですね。参考にさせていただきます。この度は回答をしていただき、ありがとうございました。

行動規範の内容に同意します

すでに解決しているようですが、formのreset()メソッドをあげておきます。
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/reset

投稿2018/08/01 04:43

x_x

総合スコア13749

ブラウザの仕様（キャッシュの残し方とか）にもよるので、そのままでは「全て同じ挙動に」という風にはならないかもしれません。

localStorage()というのがありますので、初期値を保持しておき、Documentのload時のイベントで初期値を設定するようにしてはいかがでしょうか？

投稿2018/07/31 06:52

m.ts10806

総合スコア80850

_L9u7c4i0a

2018/07/31 11:23

ブラウザによってキャッシュの仕様が違うのは仕方無いのですね。初期位置が設定出来たら更新しても混乱する事がないので便利です。ブラウザの仕様によって生じる問題には悩まされますね。この度は回答をしていただき、ありがとうございました。

行動規範の内容に同意します

ベストアンサー

おそらくサーバーにあげるかどうかは関係ありません。

以下のようにスクリプトでページのロード直後に状態を設定してはいかがでしょうか。
document.addEventListener() 関数を利用して、 DOMContentLoaded イベントに対して関数を設定することで、ページのロード直後に実行するスクリプトを指定できます。

※ただし、ページ読み込み途中にユーザーが入力した分までクリアしてしまいます。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <script type="text/javascript">
6          document.addEventListener('DOMContentLoaded', function(){
7            //input タグのうち、data-checked が指定されているタグのみ選択する
8            [].forEach.call(
9                document.querySelectorAll('input[data-checked]'),
10                function(input){ input.checked = true; }
11            )
12          })
13        </script>
14    </head>
15    <body>
16        <input type="radio" name="radio1" data-checked="" >ボタン１
17        <input type="radio" name="radio1" >ボタン２
18        <input type="radio" name="radio1" >ボタン３
19        <br>
20        <input type="radio" name="radio2"  data-checked="">ボタン１
21        <input type="radio" name="radio2" >ボタン２
22        <input type="radio" name="radio2" >ボタン３
23    </body>
24</html>