【jQuery】別の場所にあるチェックボックスを連動させる方法

複数のチェックボックスが別々の場所に配置されていて、あるチェックボックスの状態を変更した際に、別のチェックボックスの状態も自動的に変更されるようにしたい場合があります。この記事では、jQueryを使用して、簡単にチェックボックスを連動させる方法を紹介します。

jQueryの基本設定
HTMLでチェックボックスを配置
jQueryでチェックボックスを連動させる
まとめ

jQueryの基本設定

まず、jQueryを使用するためには、jQueryライブラリをプロジェクトに読み込む必要があります。次のコードをheadタグ内に追加して、jQueryを読み込みます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

このスクリプトタグを使うことで、最新のjQueryを利用できます。

HTMLでチェックボックスを配置

今回は、2つのチェックボックスを用意し、一方のチェックボックスの状態に応じて、もう一方のチェックボックスが連動する例を作成します。

<h3>チェックボックスA</h3>
<input type="checkbox" id="checkboxA"> チェックボックスA<br>

<h3>チェックボックスB</h3>
<input type="checkbox" id="checkboxB"> チェックボックスB<br>

これで、ページ上に2つのチェックボックス「A」と「B」が表示されるようになります。

jQueryでチェックボックスを連動させる

次に、チェックボックスAの状態に応じてチェックボックスBが連動するように、jQueryでスクリプトを追加します。以下のコードをページのscriptタグ内に記述します。

<script>
    $(document).ready(function() {
        // チェックボックスAの変更時にチェックボックスBの状態を連動させる
        $('#checkboxA').change(function() {
            $('#checkboxB').prop('checked', $(this).prop('checked'));
        });
    });
</script>