リンク元に応じてラジオボタンの初期値（選択状態）を動的に変更する方法

2023年8月1日

masu

遷移元のボタンに応じて、お問い合わせフォームのラジオボタンの初期値を動的にする方法をご紹介しています。

各サービスごとにお問い合わせフォームを分けていない場合などに有効で、実装することでちょっとだけユーザーフレンドリーなサイトになります。

リンク元に応じてラジオボタンの初期値を変更した例

今回のやりたいことはこちらです。

デモページ

ラジオボタンAをクリックすると、お問い合わせフォームの「ラジオボタンA」が選択された状態となります。またラジオボタンBとCも同様です。

一方で「お問い合わせ」のボタンをクリックした場合には、ラジオボタンはどれも選択されていない状態となります。

仕様は以下の通りです。

リンクをクリックでお問い合わせページへ遷移する。
ラジオボタンXのボタンをクリックすることで、お問い合わせページのラジオボタンXが選択された状態となる。
「お問い合わせ」ボタンからの遷移では、何も選択されていない状態とする。
お問い合わせページ遷移後にラジオボタンの変更が可能。

今回の実装にあたり用意したファイルは以下の通りです。

用意したファイル

index.html
contact.html
script.js

基本的にはJavaScriptでの実装となります。

コードの見本

デモサイトのコードがこちらです。style.cssのコードは省略しております。

index.html

<div class="container">
    <a href="./contact.html" class="js-btn-link">お問い合わせ</a>
    <a href="./contact.html" class="js-btn-link" data-radio-value="A">ラジオボタンA</a>
    <a href="./contact.html" class="js-btn-link" data-radio-value="B">ラジオボタンB</a>
    <a href="./contact.html" class="js-btn-link" data-radio-value="C">ラジオボタンC</a>
</div>

script.js

const btnLinks = document.querySelectorAll('.js-btn-link')
btnLinks.forEach((btnLink) => {
    btnLink.addEventListener('click', () => {
        const radioValue = btnLink.getAttribute('data-radio-value');
        sessionStorage.setItem('selectedRadio', radioValue);
    });
})

contact.html

<form action="#" method="post">
    <p>ラジオボタン<br>
        <input type="radio" name="radio" value="A" id="radioA">A
        <input type="radio" name="radio" value="B" id="radioB">B
        <input type="radio" name="radio" value="C" id="radioC">C
    </p>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const selectedRadioValue = sessionStorage.getItem('selectedRadio');
        if (selectedRadioValue) {
            const radioElement = document.getElementById('radio' + selectedRadioValue);
            if (radioElement) {
                radioElement.checked = true;
            }
        }
    });
</script>

contact.htmlではお問い合わせページ遷移後に実行したいJavaScriptのコードを<script>タグの中に記述しています。

コードの解説

簡単に各ファイルのコードを解説します。

index.html

<a href="./contact.html" class="js-btn-link">お問い合わせ</a>
<a href="./contact.html" class="js-btn-link" data-radio-value="A">ラジオボタンA</a>
<a href="./contact.html" class="js-btn-link" data-radio-value="B">ラジオボタンB</a>
<a href="./contact.html" class="js-btn-link" data-radio-value="C">ラジオボタンC</a>

containerクラスの中に、aタグのボタンが4つ配置されたシンプルな構造です（本来はbuttonタグを使うところかもしれませんが、今回はaタグにしています）。

各aタグにはクラス名js-btn-linkをつけています。また、動的に初期値を変更したいリンクにはdata属性でそれぞれを識別するためのアルファベットをふっています。

script.js

const btnLinks = document.querySelectorAll('.js-btn-link')
btnLinks.forEach((btnLink) => {
    btnLink.addEventListener('click', () => {
       //処理内容
    });
})

js-btn-linkの要素を取得してループを回し、各ボタンがクリックされた際の処理を以下の通り記述しています。

const radioValue = btnLink.getAttribute('data-radio-value');
sessionStorage.setItem('selectedRadio', radioValue);

index.htmlで設定したdata属性を取得して変数に格納し、sessionStorageでブラウザにデータ（クリックされたボタンのdata属性）を保存しています。

contact.html

<input type="radio" name="radio" value="A" id="radioA">A
<input type="radio" name="radio" value="B" id="radioB">B
<input type="radio" name="radio" value="C" id="radioC">C

formタグの中に<input type="radio">の選択肢が3つあるシンプルな構成です。inputタグには、各要素を識別するためのidを設定しています。

document.addEventListener('DOMContentLoaded', function () {
    // sessionStorageに保存された情報を取り出して変数に格納
    const selectedRadioValue = sessionStorage.getItem('selectedRadio');
    if (selectedRadioValue) {
        // sessionStorageに保存された情報に応じてinputタグを取得
        const radioElement = document.getElementById('radio' + selectedRadioValue);
        if (radioElement) {
            // 取得したinputタグにchecked属性を与える
            radioElement.checked = true;
        }
    }
});

contact.htmlのJavaScriptの処理内容は以下の通りです。