Firefoxにおけるラジオボタンの謎挙動

投稿
最終更新

ラジオボタンの前にJavaScriptで出力したボタンがあるHTMLを、Firefoxで開くと妙な挙動が。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Firefoxにおけるラジオボタンの謎挙動</title>
<script type="text/javascript">
window.addEventListener("load", function() {
  var buttonElement = document.createElement("button");
  buttonElement.appendChild(document.createTextNode("何かのボタン"));

  var pElement = document.createElement("p");
  pElement.appendChild(buttonElement);

  document.getElementsByTagName("form").item(0).insertBefore(pElement, document.getElementById("radios"));
}, false);
</script>
</head>
<body>
<form action="">
<p id="radios">
<input type="radio" name="select" id="select1" value="1" checked="checked" />
<label for="select1">選択肢1</label>
<input type="radio" name="select" id="select2" value="2" />
<label for="select2">選択肢2</label>
</p>
</form>
</body>
</html>

JavaScriptが有効な場合、読み込み時にスクリプトが実行され、form要素のDOM構造は次のようになります。

<form action="">
<p><button>何かのボタン</button></p>
<p id="radios">
（中略）
</p>
</form>
サムネイル画像
2つのラジオボタンの前にJavaScriptでボタンを挿入した画面オリジナル画像

で、次のような手順を行います。

  1. Firefoxで上記HTMLを読み込む。なお、JavaScriptが無効な場合は有効にする。
  2. 当然のことながら、「選択肢1」が選択された状態で表示される。
  3. 更新（F5 または Ctrl+R）するとあら不思議、「選択肢2」が選択されている!
  4. もういちど更新すると選択は「選択肢1」に戻る。以下、繰り返し。
Firefoxにおけるラジオボタンの謎挙動(YouTube)

…謎です。

HTMLは valid ですし、ほかのブラウザではこのような症状はみられないので、Firefox特有の問題かと思いますが。

2011年1月8日追記Firefox 4 ベータ版（Beta 8）でも依然として症状が残っていることを確認しました。また、HTMLコードを含め記事を大幅に修正しました。

2012年9月15日追記Firefox 7 で挙動が変わりました。手順2.と3.の間に『いちど「選択肢2」を選ぶ』という手順を行うと、以後はFirefox 6 以前と同じ動きをします。現在の最新Ver.15も同様。