WEB制作、マーケティングに関する情報をお届けします。

ユーザーの行動を把握したり、ユーザーに合わせてトリガーを設置して特定のイベントを実行させたりとさまざまなことに活用できるパラメーター。今回はリンク先にチェックボックスで選んだ選択肢のパラメーターを付与します。
サンクスページでどのような選択肢を選んだかを解析する際や製品の絞り込みなどにパラメーターを活用することを想定して作成しました。

コードの紹介

HTML

<ul class="device_type">
    <li><label><input type="checkbox" name="device_type" value="pc"><span>パソコン</span></label></li>
    <li><label><input type="checkbox" name="device_type" value="sp"><span>スマホ</span></label></li>
    <li><label><input type="checkbox" name="device_type" value="tablet"><span>タブレット</span></label></li>
</ul>
<ul class="status">
    <li><label><input type="checkbox" name="status" value="new"><span>新品</span></label></li>
    <li><label><input type="checkbox" name="status" value="used"><span>中古</span></label></li>
    <li><label><input type="checkbox" name="status" value="junk"><span>ジャンク</span></label></li>
</ul>

<div class="result_btn">
    <a href="https://hogehoge.com/" id="resultLink">結果をみる</a>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    function updateLink() {
        let params = new URLSearchParams();
        
        document.querySelectorAll('.device_type input[type="checkbox"]').forEach(function(checkbox) {
            if (checkbox.checked) {
                params.append(checkbox.value, 'on');
            }
        });

        document.querySelectorAll('.status input[type="checkbox"]').forEach(function(checkbox) {
            if (checkbox.checked) {
                params.append(checkbox.value, 'on');
            }
        });

        const baseUrl = 'https://hogehoge.com/';
        const resultLink = document.getElementById('resultLink');
        resultLink.href = baseUrl + '?' + params.toString();
    }

    document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
        checkbox.addEventListener('change', updateLink);
    });
});

コードを解説

HTMLの説明は割愛します。
まずは定番の読み込みから。

document.addEventListener('DOMContentLoaded', function() {});

次に関数を作成します。

function updateLink() {}

URLパラメーターを処理する際にはURLSearchParams()というクラスを使用します。URLの文字列を生成する際に便利なメソッドを持っています。

let params = new URLSearchParams();

デバイスタイプ(クラス名:device_type)で作成したチェックボックスの状態を取得します。
チェックがあればappendで要素を追加します。

document.querySelectorAll('.device_type input[type="checkbox"]').forEach(function(checkbox) {
    if (checkbox.checked) {
        // チェックされている場合はURLパラメーターに追加
        params.append(checkbox.value, 'on');
    }
});

ステータス(クラス名:status)で作成したチェックボックスも同様に処理を作成します。

document.querySelectorAll('.status input[type="checkbox"]').forEach(function(checkbox) {
    if (checkbox.checked) {
        // チェックされている場合はURLパラメーターに追加
        params.append(checkbox.value, 'on');
    }
});

元のURLとリンクを振るaタグにidを付与しているため取得し、パラメーターをセットします。

// リンクのURLを更新
       const baseUrl = 'https://hogehoge.com/';
       const resultLink = document.getElementById('resultLink');
       resultLink.href = baseUrl + '?' + params.toString();

最後にチェックボックス変更時のトリガーを設置します。

document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
        checkbox.addEventListener('change', updateLink);
    });

まとめ

以上、　『JavaScriptでチェックボックス選択時にリンクにパラメーターを付与する。』でした。