【jQuery】他のすべてのチェックボックスにチェックを入れる「すべてを選択」を実装する方法

Webページにて、多くのチェックボックスの中から複数を選択する際、すべて選択する機能は非常に便利です。今回は、jQueryを使用して、一つのチェックボックスを操作することで他のすべてのチェックボックスも操作する方法をご紹介します。

HTML

まず、以下のようなHTMLの構造からスタートします。

<input type="checkbox" id="checkAll"> すべて選択
<br>
<input type="checkbox" class="item"> 項目1
<br>
<input type="checkbox" class="item"> 項目2
<br>
<input type="checkbox" class="item"> 項目3

この構造で、上位のcheckAllというIDを持つチェックボックスを操作することで、残りのitemというクラスを持つチェックボックス群も一緒に操作します。

jQueryによる実装

以下が必要なjQueryのコードです。

$(document).ready(function() {
    $('#checkAll').on('change', function() {
        if ($(this).prop('checked')) {
            $('.item').prop('checked', true);
        } else {
            $('.item').prop('checked', false);
        }
    });
});

$(document).ready: この関数は、HTMLドキュメントが全て読み込まれた後に実行されます。これによって、スクリプトがページの他の要素より先に読み込まれてしまった場合でも、正確に動作します。

$(‘#checkAll’).on(‘change’, function() {…}): これは、checkAllというIDを持つチェックボックスの状態が変わるたびに、中の関数を実行するためのものです。

$(this).prop(‘checked’): これで、現在のチェックボックスがチェックされているかどうかを確認します。

$(‘.item’).prop(‘checked’, true);: すべて選択チェックボックスがオンの場合、このコードでitemクラスを持つすべてのチェックボックスをチェックします。

まとめ

この方法を用いれば、一つのチェックボックスの操作だけで、他の複数のチェックボックスも同時に操作することができるようになります。ユーザー体験を向上させるために、是非ともこのテクニックを活用してみてください。