「フォームはこちら」ボタンをクリックし、フォームに遷移したら、ラジオボタンが選択されているように

記事タイトルの意味がわかりにくい…。
やりたい事をもう少し詳しく書く。

一般的なコーポレートサイトを例として、

というサイト構成とする。

【お問い合わせ】ページには問い合わせフォームがある。
「問い合わせ先の店舗名」という項目があり、ラジオボタンで[店舗A][店舗B][店舗C]のいずれかを選択させる仕様とする。

やりたい事はここから。
【店舗C】ページ内に「問い合わせフォームはこちら」というボタンがあるとしよう。
クリックすればページ遷移が発生し、【お問い合わせ】ページの問い合わせフォームへ飛ばされる。
その際に、ラジオボタンの[店舗C]が選択されている状態としたい。

ページ外リンクの場合（ページ遷移が発生する場合）

上記例で示したケースを解説する。
（別のケース「ページ内リンクの場合」も後述する。）

手順1：ラジオボタンのinputタグにそれぞれ固有のidを付与する

【お問い合わせ】ページにて。
ラジオボタンのinputタグにそれぞれ固有のidを付与しよう。

<span id="shopname">
	<input name="shopname" value="店舗A" id="shopname_01" type="radio">
	<input name="shopname" value="店舗B" id="shopname_02" type="radio">
	<input name="shopname" value="店舗C" id="shopname_03" type="radio">
</span>

ちなみに、例えばWordPressの『Contact Form 7』などのプラグインを利用している場合など、カスタマイズ性の問題から自由にid付与ができない事情があれば、jQueryで対応する。

$('span#shopname input').each(function(i){
	$(this).attr('id','shopname_0' + (i+1));
});

このように書けばOK。
ブラウザの「要素を検証」で確認してみて、idが付与されていれば問題ない。

手順2：「問い合わせはこちら」ボタンの書き方

【店舗A】【店舗B】【店舗C】ページにて。
「問い合わせはこちら」ボタンの書き方は、以下のようにしよう。

<!-- 【店舗A】ページにて -->
<div class="btn">
	<a href="contact#shopname_01">問い合わせフォームはこちら</a>
</div>

<!-- 【店舗B】ページにて -->
<div class="btn">
	<a href="contact#shopname_02">問い合わせフォームはこちら</a>
</div>

<!-- 【店舗C】ページにて -->
<div class="btn">
	<a href="contact#shopname_03">問い合わせフォームはこちら</a>
</div>

手順3：JavaScriptでラジオボタンを選択させる

続いて、【お問い合わせ】ページにて。
JavaScriptで以下のように記述。

window.addEventListener('DOMContentLoaded', function(e){
	document.querySelector(location.hash).checked=true;
});

これでページ遷移後にラジオボタンの選択がされているはずだ。

手順4：高さ補正

ただし、ページ遷移後のウィンドウの高さが、ラジオボタンの位置となる。
その位置を補正したい（例えばフォーム最上部にしたい）場合は、jQueryで以下を追記。

$(window).on('load', function() {
	var url = $(location).attr('href');
	if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = $('#' + anchor[anchor.length - 1]);
		if(target.length){
			$("html,body").animate({
				scrollTop:$('#contactform').offset().top
			},1);
		}
	}
});

こうすれば、ページ遷移後のウィンドウの高さは「#contactform」の位置だ。

ページ内リンクの場合（ページ遷移が発生しない場合）

続いて、ページ内リンクの場合を解説する。

サイト構成が以下のような状況であることを想定。

1ページ内で完結する（ページ遷移が発生せず、スクロール移動で完結する）場合。

手順1：ラジオボタンのinputタグにそれぞれ固有のidを付与する

前述の【手順1】と同様。

手順2：「問い合わせはこちら」ボタンの書き方

「問い合わせはこちら」ボタンの書き方に注意。以下のようにしよう。

<!-- 【店舗A】のエリアにて -->
<div class="btn">
	<label for="shopname_01">
		<a>問い合わせフォームはこちら</a>
	</label>
</div>

<!-- 【店舗B】のエリアにて -->
<div class="btn">
	<label for="shopname_02">
		<a>問い合わせフォームはこちら</a>
	</label>
</div>

<!-- 【店舗C】のエリアにて -->
<div class="btn">
	<label for="shopname_03">
		<a>問い合わせフォームはこちら</a>
	</label>
</div>

ルールとして、「label for=」で関連付けをすれば、クリックでラジオボタンは選択される。

ただし、aタグにページ内リンクの命令を書くと選択されなくなってしまうので、aタグは空っぽとする。
お馴染みの「href=”#shopname_01″」とはしない。

手順3：フォームへスクロールさせる

ページ内スクロールは、jQueryで行う。以下のように記述。

$(document).on('click','.btn label a', function(){
	$("html,body").animate({
		scrollTop:$('#contactform').offset().top
	},300);
});

これで「#contactform」の位置へスクロールされる。
意図した動作となったはずだ。