Microsoft Edgeでのラジオボタンの挙動について

この記事を書いている時のバージョン（40.1563）において、ブラウザバックした時に、ラジオボタンのチェックが外れる現象が起きています。

Windows10、Edge環境において、以下の最小と思われる要素のみで実験した
- ラジオボタン２つ（name属性値は同じもの）、submitボタン１つ、form要素でリクエスト先を設定しただけのもの
- ラジオボタンの片方には「checked」を設定
- 「checked」を初期に設定されているラジオボタンに「check」がついている場合→送信→ブラウザバック→問題なし
- 「checked」を初期に設定していないラジオボタンに「check」がついている場合→送信→ブラウザバック→ラジオボタン2つともチェックが外れる

参考までに、ラジオボタンが外れている状態で送信をしてみましたが、ラジオボタンのデータは送信されていませんでした。（レンダリング上ラジオボタンが外れているように見えているのではなく、構造上チェックが付いていないということと考えます）

不可解な挙動

HTMLとしてラジオボタンの属性checkedがついているものが選択されている時はブラウザバックしても問題なく、checkedが設定されていないものが選択されている場合にブラウザバックをした時に問題が起きています。

HTMLにcheckedがついているラジオボタンのチェックが、ブラウザバック時に外れたレンダリングがされていると言うことは、現在選択されていないことが、ブラウザとしては認識しているわけで、挙動としては不可解（理に合わない、バグである）と感じます。

代替的な復帰方法

そもそもラジオボタンの選択済みの状態が保持されるのはブラウザ側の処理なので、保持されないことを設定することはできないと考えます。(アップデートによる修正を待ちましょう。)

代替的な復帰方法としては、Cookieやローカルストレージ等、情報を保持するものを利用して、ページ毎に常にラジオボタンの挙動を保存し、ページに戻ってきた時に、保存された値を元に復帰することが、代替的な方法と考えます。

jQueryとhiddenフィールドを使った簡易的な復帰方法

Cookie等の処理をしたくない人に、簡易的な復帰方法を検討しました。

(1)ラジオボタングループ毎に、隠しフィールドを作成
(2)隠しフィールドには、data-name属性を設定する
(3)data-name属性値には、ラジオボタングループのname属性値と同じ属性値を設定
(4)JavaScriptで、ラジオボタンのチェックが変わる度に、隠しフィールドに選択したラジオボタンのvalue値を入力
(5)ブラウザバック時（ページ表示初期時）に、隠しフィールドに値がある場合はその値と同じ値を持つラジオボタンの要素に対して、checkedを設定する

<form action="https://www.google.co.jp/">
  <input type="radio" name="fooData" value="0">
  <input type="radio" name="fooData" value="1" checked>
  <input type="hidden" data-name="fooData">
  <input type="submit">
</form>

↑隠しフィールドをラジオボタングループ毎に作成し、data-name属性値を設定。属性値を、ラジオボタングループのname属性値と一緒にした例

JavaScript　code

$(function () {
    var $radioButton = $('input[type=radio]');
    var $dataSaveField = $('[data-name]');

    //各ラジオボタンの設定（value値記録）
    $radioButton.on('change', function (e) {
        var $self = $(this);
        var valueData = $self.val();
        var nameData = $self.attr('name');
        var $myDataSaveField = $('[data-name=' + nameData + ']');
        $myDataSaveField.val(valueData);
    });

    //隠しフィールドの値から復帰処理
    $dataSaveField.each(function () {
        var $self = $(this);
        var valueData = $self.val();
        if(valueData === '') return false;
        var nameData = $self.attr('data-name');
        var $groupRadioButton = $('input[name=' + nameData + ']');
        $groupRadioButton.each(function () {
            var $self = $(this);
            if ($self.val() === valueData) {
                $self.prop('checked', true);
            }
        });
    });

});

↑JavaScriptでは、各ラジオボタンにチェックした時に値を隠しフィールドに入れる処理と、復帰時に隠しフィールドの値を元にラジオボタンにチェックを入れ直す考え方です。

Microsoft Edgeでブラウザバックをした時ラジオボタンのチェックが外れる問題

Microsoft Edgeでのラジオボタンの挙動について

不可解な挙動

代替的な復帰方法

jQueryとhiddenフィールドを使った簡易的な復帰方法