location.hashを使ってラジオボタンが選ばれた状態でページ遷移させる

javascriptのlocation.hashプロパティを使う事でURLのハッシュを取得することが出来ます。

今回の ポイント

• トップページの「資料請求ボタン」と「お問い合わせボタン」をクリックしてページ遷移した時にJavaScriptの「location.hash 」を使って、選んだ方のラジオボタンがcheckedの設定になっているようにし、それに対応したフォームだけが表示されるようにする

トップページにボタンを設置この時にIDを指定する

<a href="form/input.php#item_01">商品Aはこちら</a>
<a href="form/input.php#item_02">商品Bはこちら</a>

2.申し込みページ「input.php」

<p><input name="itemname" value="商品A" id="item_01" type="radio">商品A</p>
<p><input name="itemname" value="商品B" id="item_02" type="radio">商品B</p>

3.申し込みページにjQueryでcheckedの値を取得

$(location.hash).prop('checked',true);

prop()メソッドを使ってラジオボタンが選ばれている時に対応しているフォームが表示されるようにする

「:checked」を使う事で、ラジオボタンやチェックボックスが選ばれている時に限った命令が出来ます。
jQueryでは「prop()メソッド」はHTML要素に付与されている「id・class・name」…などの属性や、「checked・selected」…などのプロパティを取得できます。

//ラジオボタンがcheckedになったとき対応する.boxに.showを付与
$('input[type="radio"]').each(function(){
if($(this).prop('checked')){
$('#' + $(this).attr('href')).addClass('show');
}
});