JavaScriptを（も？）使って、radioの選択状態を引き継ぐ

エラー画面でのお話し。
入力画面で、空欄などの入力ミスが合った場合に、元の入力画面（もしくはそれに似た入力が残っているエラー画面）にエラー付きで戻ってくる場合の挙動です。

↓のような画面イメージ。

で、こういうエラー画面の時に、以前入力したテキストやチェックボックスが反映されてないと、すごくめんどくさいですよね？
これのラジオの選択状態をJavaScriptもつかってやってしまおうというTipsです。
（別に普通にやればいいじゃんというのは、置いておいて……）

やることのアウトラインは、こんな感じです。
1.radioの値を受け取るためのhiddenを用意する
そのhiddenに選択したradioのvalueを埋める
2..hiddenの値によって、radioの選択状態を切り替える

1.radioの値を受け取るためのhiddenを用意する。そのhiddenに選択したradioのvalueを埋める

valueの値を複数ページ間で引き継ぐことをJavaScriptでやるとなると、Submit時にパラメータにやって……という感じに思われるかもしれませんが、ここはあくまでエラー画面だけの修正で。

まずに、何のために使うのかわからないhidden項目を用意して、そこにradioの値を入れるようにします。

<input type="hidden" name="tekitou" value="$radioの値">

こんな感じですね。

2.hiddenの値によって、radioの選択状態を切り替える

次に、そのhiddenに入っている値によって、radioの選択状態を切り替えます。
hiddenの値は、もともとradioの値ですから、またradioの値に戻るわけです。
こんなことしないでもいいかもしれませんが、radioの値がradioの値になって、そのradioの値がradioの値になって……と、ブラウザによっては、もしかしたら、な状況になるかもしれないので、一旦hiddenに逃げています。

そしてその値によって、radioの値を切り替えています。
書き方は、それぞれでしょうが、今回は、

	if(document.フォーム名.hiddenのname.value == "hiddenの値"){
	document.getElementById("radioのid1つ目").checked = true;
	}
	else{
	document.getElementById("radioのid２つ目").checked = true;
	}

としました。

いかがでしょうか？