質問: ラジオボタンを3つほど作り、最初のボタンにはcheckedを記入しています。 つまり最初から選択されている状態、のはずなのですが、 ブラウザを更新させると外れていたり、更新前にチェックした状態と変わっていなかったりします。 一番最初にHTMLをブラウザで開いたときはプログラム通りにチェックが入っているのですが。 症状はブラウザによって違います。 Microsoft Edge Chrome Firefox これらのブラウザで試してみました。 HTMLをブラウザで開いて、適当にボタンをポチポチチェックします。 ブラウザを更新します。 Microsoft Edgeの場合、 チェックが全部外れてます。 Firefoxの場合、 更新前にチェックした状態のままです。 唯一まともだったのがChromeです。 更新するとちゃんと一番最初の状態(checkedは選択されている)に戻っていました。 質問ですが、 それぞれを更新させると、何故ブラウザよってチェック状態が違うのですか? できれば全てChromeと同じ様に動作して欲しいところです。 それを実現させることができるソースコードをご存知でしたら教えてください。 ...htmlをサーバーに上げると改善したりしますか? ``` ボタン1 ボタン2 ボタン3 ボタン1 ボタン2 ボタン3 ```
回答: おそらくサーバーにあげるかどうかは関係ありません。 以下のようにスクリプトでページのロード直後に状態を設定してはいかがでしょうか。 *document.addEventListener()* 関数を利用して、 DOMContentLoaded イベントに対して関数を設定することで、ページのロード直後に実行するスクリプトを指定できます。 ※ただし、ページ読み込み途中にユーザーが入力した分までクリアしてしまいます。 ``` ボタン1 ボタン2 ボタン3 ボタン1 ボタン2 ボタン3 ``` タグにcheckedを指定する代わりに、data-checked="" としているところに注意してください。