パラメーター付きリンクから飛んできた時該当のチェックボックスを選択済みにする方法

今回はリンクについているパラメーターのname属性とinputのname属性が一致したらinputにチェックをつけるという方法です。

サイト改修案件でチェックボックスで作られたアコーディオンにidが振られており、外から飛んできたときに該当の箇所がcheckedになりアコーディオンが開くという仕様にする際にやったことをメモしておきます。

今回アコーディオンのcssは割愛しております

リンクにアンカーをつける場合はパラメーターの後につけてください。
例:?test=1&test2=2#hoge

デモ

https://codepen.io/mahyam/pen/ZEpaWxo?test=1&test2=2

js

$(function() {
    var url = location.href; /*サイトのURL取得*/
    var params = url.split('?'); /*URLの?の部分で切り離す*/
    var param = params[1].split('&'); /*URLの?以降のURLを&で切り離す*/
    for(var i = 0; i < param.length; i++) {
/*paramにはURLの?以降のURLを&で切り離した値の配列が入っているその数だけ繰り返す*/
        var vl = param[i].split('=');/*param の配列の値を=で切り離す*/
        $('input').each(function(){
            var name = $(this).attr('name');/*inputのname属性を取得して変数nameに入れる*/
            if(vl[0] == name) {
/*変数vlの[0]には送られてきたリンクで送られてきたname属性,[1]にはリンクで送られてきたvalueが入っていますvl[0] とinputのname属性が一致したら*/
                $(this).prop("checked",true); /*そのinputをcheckedにする*/
            }
        });
    }
});

HTML

<label for="testcheck1">テスト1</label><input type="checkbox" id="testcheck1" name="test" value="1">
<label for="testcheck2">テスト2</label>
<input type="checkbox" id="testcheck2" name="test2" value="2">