フロントエンド開発の基礎！HTMLにおける「すべて選択」チェックボックス

2024-04-03

HTMLにおける「すべて選択」チェックボックスの実装方法

JavaScriptを使用する方法

基本的な方法

以下のコードは、JavaScriptを使用して「すべて選択」チェックボックスを実装する方法です。

<input type="checkbox" id="all-select">
<label for="all-select">すべて選択</label>

<script>
const allSelectCheckbox = document.getElementById('all-select');
const checkboxes = document.querySelectorAll('.item-checkbox');

allSelectCheckbox.addEventListener('change', () => {
  checkboxes.forEach(checkbox => {
    checkbox.checked = allSelectCheckbox.checked;
  });
});
</script>

all-select は「すべて選択」チェックボックスのID
item-checkbox は個々のアイテムのチェックボックスのクラス名

このコードは以下の動作を実現します。

「すべて選択」チェックボックスがオンになると、すべての個々のアイテムのチェックボックスがオンになります。

jQueryを使用すると、より簡潔にコードを書くことができます。

<input type="checkbox" id="all-select">
<label for="all-select">すべて選択</label>

<script>
$(document).ready(() => {
  $('#all-select').on('change', () => {
    $('.item-checkbox').prop('checked', $('#all-select').prop('checked'));
  });
});
</script>

このコードは、上記のコードと同じ動作を実現しますが、jQueryを使用することでコード量が少なくなっています。

HTMLのindeterminate属性を使用する方法

indeterminate属性を使用すると、「すべて選択」チェックボックスが一部選択状態になっていることを表示できます。

<input type="checkbox" id="all-select" indeterminate>
<label for="all-select">すべて選択</label>

<script>
const allSelectCheckbox = document.getElementById('all-select');
const checkboxes = document.querySelectorAll('.item-checkbox');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    const checkedCount = checkboxes.filter(checkbox => checkbox.checked).length;
    allSelectCheckbox.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  });
});
</script>

個々のアイテムのチェックボックスがオンになると、「すべて選択」チェックボックスが一部選択状態になります。

HTMLで「すべて選択」チェックボックスを実装するには、いくつかの方法があります。

JavaScriptを使用する方法: 最も汎用性の高い方法
jQueryを使用する方法: JavaScriptよりも簡潔にコードを書ける
HTMLのindeterminate属性を使用する方法: 一部選択状態を表示できる

どの方法を選択するかは、プロジェクトの要件と開発者の好みによって異なります。

補足

上記のコードは基本的な例です。実際のプロジェクトでは、要件に合わせてコードをカスタマイズする必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>すべて選択チェックボックス</title>
</head>
<body>
  <h1>すべて選択チェックボックス</h1>
  <input type="checkbox" id="all-select">
  <label for="all-select">すべて選択</label>

  <ul>
    <li>
      <input type="checkbox" class="item-checkbox" name="item1">
      <label for="item1">アイテム1</label>
    </li>
    <li>
      <input type="checkbox" class="item-checkbox" name="item2">
      <label for="item2">アイテム2</label>
    </li>
    <li>
      <input type="checkbox" class="item-checkbox" name="item3">
      <label for="item3">アイテム3</label>
    </li>
  </ul>

  <script>
  const allSelectCheckbox = document.getElementById('all-select');
  const checkboxes = document.querySelectorAll('.item-checkbox');

  allSelectCheckbox.addEventListener('change', () => {
    checkboxes.forEach(checkbox => {
      checkbox.checked = allSelectCheckbox.checked;
    });
  });
  </script>
</body>
</html>

このコードを実行すると、以下のような画面が表示されます。

実行方法

このコードをHTMLファイルに保存し、ブラウザで開きます。

応用

このコードは、以下の要件に合わせてカスタマイズできます。

個々のアイテムのチェックボックスの種類を変更する
「すべて選択」チェックボックスのラベルを変更する

HTMLにおける「すべて選択」チェックボックスの実装方法

HTMLのchecked属性を使用する方法

個々のアイテムのチェックボックスのchecked属性をtrueに設定すると、そのチェックボックスが初期状態で選択された状態になります。

<input type="checkbox" id="all-select">
<label for="all-select">すべて選択</label>

<ul>
  <li>
    <input type="checkbox" class="item-checkbox" name="item1" checked>
    <label for="item1">アイテム1</label>
  </li>
  <li>
    <input type="checkbox" class="item-checkbox" name="item2" checked>
    <label for="item2">アイテム2</label>
  </li>
  <li>
    <input type="checkbox" class="item-checkbox" name="item3">
    <label for="item3">アイテム3</label>
  </li>
</ul>

初期状態で、アイテム1とアイテム2が選択されています。

JavaScriptのquerySelectorとquerySelectorAllを使用する方法

querySelectorとquerySelectorAllを使用すると、個々のアイテムのチェックボックスをより簡単に取得できます。

<input type="checkbox" id="all-select">
<label for="all-select">すべて選択</label>

<ul>
  <li>
    <input type="checkbox" class="item-checkbox" name="item1">
    <label for="item1">アイテム1</label>
  </li>
  <li>
    <input type="checkbox" class="item-checkbox" name="item2">
    <label for="item2">アイテム2</label>
  </li>
  <li>
    <input type="checkbox" class="item-checkbox" name="item3">
    <label for="item3">アイテム3</label>
  </li>
</ul>

<script>
const allSelectCheckbox = document.getElementById('all-select');
const checkboxes = document.querySelectorAll('.item-checkbox');

allSelectCheckbox.addEventListener('change', () => {
  if (allSelectCheckbox.checked) {
    checkboxes.forEach(checkbox => checkbox.checked = true);
  } else {
    checkboxes.forEach(checkbox => checkbox.checked = false);
  }
});
</script>

<input type="checkbox" id="all-select">
<label for="all-select">すべて選択</label>

<ul>
  <li>
    <input type="checkbox" class="item-checkbox" name="item1">
    <label for="item1">アイテム1</label>
  </li>
  <li>
    <input type="checkbox" class="item-checkbox" name="item2">
    <label for="item2">アイテム2</label>
  </li>
  <li>
    <input type="checkbox" class="item-checkbox" name="item3">
    <label for="item3">アイテム3</label>
  </li>
</ul>

<script>
$(document).ready(() => {
  $('#all-select').on('change', () => {
    $('.item-checkbox').prop('checked', $('#all-select').prop('checked'));
  });
});
</script>

HTMLのchecked属性を使用する: 初期状態で一部のチェックボックスを選択する
JavaScriptのquerySelectorとquerySelectorAllを使用する方法: コード量を少なくする方法

javascript html checkbox