【JavaScript】遷移元によってラジオボタンのチェックを変更する

2024年12月13日

お問い合わせフォームへの遷移元によって、フォーム内のラジオボタンのチェックを変更したい

というわけで今回は、遷移元によってラジオボタンのチェック箇所を変更する実装をご紹介します。

遷移元によってラジオボタンのチェックを変更する

お問い合わせフォームはWordPressプラグイン「Contact Form7」で実装しております。

今回はラジオボタンで設置した下記のようなセクションです。

通常は「お仕事・業務に関するお問い合わせ」という項目にチェックが入っております。
ただ、求人セクションにある下記のようなボタン↓

このボタンを押すと、お問い合わせフォームに遷移するようリンクを設定しております。
ユーザー目線だと、このボタンを押すということは求人に興味があるということなので
お問い合わせフォームのチェックは必然と「求人に関するお問い合わせ」になりますよね。

今回は、このクリックし直すワンアクションを省略できる実装となります。

HTML

まずは遷移元のボタン側の説明です。

【HTML】

<div class="p-recruit__btn">
　<a href="#contact" class="c-btn js-check" data-target="check2"><span>ご応募はこちらより</span>
　</a>
</div>

ここでのポイントは「data属性」です。
以前の記事でもご紹介しておりますのでそちらもご確認ください↓

【HTML】「data属性」を使用してサブタイトルを付ける

今回は「data-target」という名前で設定しております。
「data-target」に指定する値は、ラジオボタンでチェックしたい要素のIDを指定してください。
「求人に関するお問い合わせ」には「check2」というIDを設定しております。

あとは、classに「js-check」を設定しております。
これはのちほどご紹介するJavaScriptで使用します（クラス名は任意です）

JavaScript

続いてJavaScriptのご紹介です。

【JavaScript】

document.querySelectorAll('.js-check').forEach(link => {
  link.addEventListener('click', (event) => {
    event.preventDefault(); // デフォルトのリンク動作を無効化
			
    // data-target属性で対象のラジオボタンを指定
	const targetId = link.getAttribute('data-target');
	if (targetId) {
	  const targetRadio = document.getElementById(targetId);
				
	    if (targetRadio) {
		// ラジオボタンのチェックを切り替え
		targetRadio.checked = true;
	    }
	}
  });
});

コードの構造と動作の説明

document.querySelectorAll を使用してリンクを取得
document.querySelectorAll('.js-check') .js-check クラスを持つすべての要素を取得します。
各リンクにクリックイベントを設定
.forEach(link => { link.addEventListener('click', (event) => { 各リンク要素に対して、クリックイベントリスナーを追加します。このイベントリスナーはリンクがクリックされた際に実行されます。
デフォルトのリンク動作を無効化
event.preventDefault(); 通常、リンクをクリックするとそのリンク先に遷移しますが、event.preventDefault() によってこの動作を無効化しています。
リンクの data-target 属性を取得
const targetId = link.getAttribute('data-target'); この属性値は、関連するラジオボタンの id を示します。
指定されたラジオボタンを取得
const targetRadio = document.getElementById(targetId); targetId に基づいて、対応するラジオボタン要素を document.getElementById で取得します。
ラジオボタンを選択 (チェック)
if (targetRadio) { targetRadio.checked = true; } 対象のラジオボタンが存在する場合 (if (targetRadio))、そのラジオボタンの checked プロパティを true に設定して選択状態にします。