ボタンクリックしたら遷移先の指定チェックボックスにチェックを入れたい

あまり使用頻度高くないかもだけどタイトルのまんまです!
javascript(jQuery)を使います!

まずはボタンのhtml
遷移先の指定チェックボックスidを、urlの後ろに「?check=checkbox-001」みたいな感じで突っ込みます。

<a href="/download?check=checkbox-001" class="btn">資料請求はコチラ</a>

ちなみに複数指定の場合はこんな感じです。超簡単です。

<a href="/download?check=checkbox-001&check=checkbox-002" class="btn">資料請求はコチラ</a>

次に遷移先のhtml
ボタンのurlにつけた「id=”checkbox-001″」を間違えずに指定しましょう。

<label>
<input type="checkbox" name="dl-001" id="checkbox-001" value="dl-001">資料001
</label>

次にjs(jquery)
まんまコピペでいけると思います!

$(document).ready(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const checks = urlParams.getAll('check');
    checks.forEach(function(check) {
      $('#' + check).prop('checked', true);
    });
});

一見ややこしそうですが、なんとも簡単です!

以上でございます。

タイトルとURLをコピーしました