【JavaScript】「全て選択」チェックボックスを実装する方法

Webアプリケーションやフォームでよく見かける機能の一つが、「全て選択」チェックボックスです。このチェックボックスがオンになると、リスト内の他のすべてのチェックボックスも自動的にオンになります。この記事では、そのような「全て選択」チェックボックスをJavaScriptを使って簡単に実装する方法をご紹介します。

必要なHTML構造
JavaScriptでのロジック実装
完成したコード
まとめ

必要なHTML構造

まずは、HTMLで必要なチェックボックスを作成します。以下のコードスニペットは、一つの「全て選択」チェックボックスと、それに続く3つのアイテムのチェックボックスを示しています。

<input type="checkbox" id="selectAll"> 全て選択
<br>
<input type="checkbox" class="item" value="1"> アイテム1
<br>
<input type="checkbox" class="item" value="2"> アイテム2
<br>
<input type="checkbox" class="item" value="3"> アイテム3

JavaScriptでのロジック実装

次に、このHTMLに対してJavaScriptでロジックを実装します。以下のステップに従ってください。

「全て選択」チェックボックスのイベントリスナー

まず、「全て選択」チェックボックスにイベントリスナーを設定します。このイベントリスナーは、チェックボックスの状態が変更されたときに発火します。

const selectAllCheckbox = document.getElementById('selectAll');

各アイテムのチェックボックスの状態を変更

「全て選択」チェックボックスがオンになった場合、他のすべてのチェックボックスもオンにします。逆に、オフになった場合は、他のすべてのチェックボックスもオフにします。

selectAllCheckbox.addEventListener('change', function() {
  const itemCheckboxes = document.querySelectorAll('.item');
  itemCheckboxes.forEach(function(checkbox) {
    checkbox.checked = selectAllCheckbox.checked;
  });
});

各アイテムのチェックボックスにもイベントリスナーを設定

各アイテムのチェックボックスが個別に選択された場合、全てが選択されているかどうかを確認し、「全て選択」チェックボックスの状態を適切に更新します。

const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    const allChecked = Array.from(itemCheckboxes).every(c => c.checked);
    selectAllCheckbox.checked = allChecked;
  });
});

完成したコード

以上のコードを組み合わせると、以下のようになります。

<!-- HTML -->
<input type="checkbox" id="selectAll"> 全て選択
<br>
<input type="checkbox" class="item" value="1"> アイテム1
<br>
<input type="checkbox" class="item" value="2"> アイテム2
<br>
<input type="checkbox" class="item" value="3"> アイテム3

// JavaScript
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item');

selectAllCheckbox.addEventListener('change', function() {
  itemCheckboxes.forEach(function(checkbox) {
    checkbox.checked = selectAllCheckbox.checked;
  });
});

itemCheckboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    const allChecked = Array.from(itemCheckboxes).every(c => c.checked);
    selectAllCheckbox.checked = allChecked;
  });
});

まとめ

この記事では、JavaScriptを使用して「全て選択」チェックボックスを簡単に実装する方法を解説しました。この機能は、ユーザーが複数の項目を一度に選択する必要がある場合に非常に便利です。ぜひ、このコードを参考にして、自分のプロジェクトで活用してみてください。