複数のチェックボックスが別々の場所に配置されていて、あるチェックボックスの状態を変更した際に、別のチェックボックスの状態も自動的に変更されるようにしたい場合があります。この記事では、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>- $(‘#checkboxA’) は、チェックボックスAをjQueryで選択しています。
- change() メソッドを使って、チェックボックスAがクリックされるたびに、その変更イベントを監視します。
- prop() メソッドで、チェックボックスAのchecked状態を取得し、その状態をチェックボックスBに反映させます。
これにより、チェックボックスAがチェックされた場合はチェックボックスBもチェックされ、チェックが外された場合はチェックボックスBも同様にチェックが外れます。
まとめ
jQueryを使うことで、複数のチェックボックスを簡単に連動させることができます。特に、フォームやユーザーインターフェースの操作をスムーズにしたい場合、このような技術は非常に便利です。ぜひ、プロジェクトで活用してみてください！
