一括選択機能付きチェックボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

一括選択機能付きチェックボックスを作る方法

一括選択機能付きチェックボックスを作る方法を紹介します。親となる「すべて選択」チェックボックスをクリックするだけで、複数のチェックボックスをまとめて選択・解除できるシンプルなサンプルです。

設定画面やアンケートフォーム、権限管理画面、商品一覧など、複数の項目をまとめて操作したい場面で便利に利用できます。JavaScriptでチェック状態を連動させるため、少ないコードで分かりやすく実装できます。

デザインはHTMLとCSSで整え、動作はJavaScriptのみで実現しています。項目の追加・削除も簡単に行えるため、そのままコピーしてフォームや管理画面へ組み込めます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

サンプルコードの利用・改変は自由ですが、ご利用は自己責任でお願いいたします。

デモ

一括選択機能付きチェックボックス

「すべて選択」で各項目をまとめて選択・解除できます。

すべて選択 HTML CSS JavaScript PHP Python

「すべて選択」をクリックすると全項目が選択され、もう一度クリックすると全項目の選択が解除されます。個別項目をすべて選択した場合も、「すべて選択」が自動でチェックされます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードをUTF-8へ設定 -->
  <meta charset="UTF-8">

  <!-- スマートフォンやタブレットの画面幅へ対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ブラウザのタブへ表示するページタイトル -->
  <title>一括選択機能付きチェックボックス</title>

  <!-- チェックボックスのデザインを設定するCSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 一括選択機能付きチェックボックス全体 -->
  <div class="checkbox-select-all_wrap">

    <!-- チェックボックスエリアのタイトル -->
    <div class="checkbox-select-all_title">
      一括選択機能付きチェックボックス
    </div>

    <!-- 操作方法を案内する説明文 -->
    <p class="checkbox-select-all_text">
      「すべて選択」で各項目をまとめて選択・解除できます。
    </p>

    <!-- 一括選択と個別項目をまとめる一覧 -->
    <div class="checkbox-select-all_list">

      <!-- すべての項目を一括操作するチェックボックス -->
      <label class="checkbox-select-all_label checkbox-select-all_master">

        <!-- 一括選択の状態を管理するチェックボックス -->
        <input
          class="checkbox-select-all_input"
          id="checkbox-select-all-master"
          type="checkbox">

        <!-- 一括選択の項目名 -->
        <span class="checkbox-select-all_name">
          すべて選択
        </span>

      </label>

      <!-- HTMLのチェックボックス項目 -->
      <label class="checkbox-select-all_label">

        <!-- HTMLの選択状態を管理するチェックボックス -->
        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="html">

        <!-- HTMLの項目名 -->
        <span class="checkbox-select-all_name">
          HTML
        </span>

      </label>

      <!-- CSSのチェックボックス項目 -->
      <label class="checkbox-select-all_label">

        <!-- CSSの選択状態を管理するチェックボックス -->
        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="css">

        <!-- CSSの項目名 -->
        <span class="checkbox-select-all_name">
          CSS
        </span>

      </label>

      <!-- JavaScriptのチェックボックス項目 -->
      <label class="checkbox-select-all_label">

        <!-- JavaScriptの選択状態を管理するチェックボックス -->
        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="javascript">

        <!-- JavaScriptの項目名 -->
        <span class="checkbox-select-all_name">
          JavaScript
        </span>

      </label>

      <!-- PHPのチェックボックス項目 -->
      <label class="checkbox-select-all_label">

        <!-- PHPの選択状態を管理するチェックボックス -->
        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="php">

        <!-- PHPの項目名 -->
        <span class="checkbox-select-all_name">
          PHP
        </span>

      </label>

      <!-- Pythonのチェックボックス項目 -->
      <label class="checkbox-select-all_label">

        <!-- Pythonの選択状態を管理するチェックボックス -->
        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="python">

        <!-- Pythonの項目名 -->
        <span class="checkbox-select-all_name">
          Python
        </span>

      </label>

    </div>

  </div>

  <!-- 一括選択機能を設定するJavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* 一括選択機能付きチェックボックス全体 */
.checkbox-select-all_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 全体の最大横幅。値を大きくすると表示領域が広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右を中央配置 */
  padding:32px; /* 全体の内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #dfe7f0; /* 全体を囲む枠線の太さ・種類・色 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* チェックボックス全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.checkbox-select-all_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.checkbox-select-all_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると一覧との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* チェックボックス一覧 */
.checkbox-select-all_list{
  display:grid; /* 各チェックボックスをグリッドで配置 */
  gap:12px; /* 項目同士の間隔。値を大きくすると縦方向の余白が広がる */
}

/* 各チェックボックス項目 */
.checkbox-select-all_label{
  display:flex; /* チェックボックスと項目名を横並びにする */
  align-items:center; /* チェックボックスと文字を縦方向の中央へ揃える */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  min-height:56px; /* 項目の最小高さ。値を大きくするとタップ領域が高くなる */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白。値を大きくすると項目が広くなる */
  border:1px solid #dfe7f0; /* 項目を囲む枠線の太さ・種類・色 */
  border-radius:12px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 個別項目の背景色 */
  color:#111827; /* 項目内の基本文字色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  box-sizing:border-box; /* paddingとborderを横幅と高さへ含める */
}

/* 一括選択の項目 */
.checkbox-select-all_master{
  margin-bottom:6px; /* 個別項目との間隔。値を大きくすると下側の余白が広がる */
  border-color:#bfdbfe; /* 一括選択項目の枠線色 */
  background:#eff6ff; /* 一括選択項目の背景色 */
}

/* チェックボックス本体 */
.checkbox-select-all_input{
  width:22px; /* チェックボックスの横幅。値を大きくすると横方向へ大きくなる */
  height:22px; /* チェックボックスの高さ。値を大きくすると縦方向へ大きくなる */
  margin:0 14px 0 0; /* 右側14pxの余白。値を大きくすると項目名との間隔が広がる */
  accent-color:#0b6bff; /* チェック時に表示する色 */
  flex-shrink:0; /* 横幅が狭くてもチェックボックスを縮めない */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 各項目の名前 */
.checkbox-select-all_name{
  color:#111827; /* 項目名の文字色 */
  font-size:16px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字にする */
  line-height:1.5; /* 項目名の行間。値を大きくすると行間が広がる */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小して画面を広く使う */
  }

  /* スマートフォン表示時のチェックボックス全体 */
  .checkbox-select-all_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小して画面内へ収める */
  }

  /* スマートフォン表示時の各項目 */
  .checkbox-select-all_label{
    padding:14px; /* 内側余白を14pxへ縮小して表示領域を確保 */
  }

}

// 一括選択チェックボックスを取得
const masterCheckbox = document.getElementById(
  'checkbox-select-all-master'
);

// 個別項目のチェックボックスをすべて取得
const itemCheckboxes = document.querySelectorAll(
  '.checkbox-select-all_item'
);

// 一括選択チェックボックスが変更されたときの処理
masterCheckbox.addEventListener('change', () => {

  // 一括選択と同じチェック状態をすべての個別項目へ反映
  itemCheckboxes.forEach((checkbox) => {
    checkbox.checked = masterCheckbox.checked;
  });

});

// 各個別項目へ変更イベントを設定
itemCheckboxes.forEach((checkbox) => {

  // 個別項目が変更されたときの処理
  checkbox.addEventListener('change', () => {

    // すべての個別項目が選択されているか確認
    const allItemsChecked = [...itemCheckboxes].every(
      (itemCheckbox) => itemCheckbox.checked
    );

    // 全項目が選択されている場合だけ一括選択をオンにする
    masterCheckbox.checked = allItemsChecked;

  });

});

// 「すべて選択」のチェックボックスを取得
const masterCheckbox = document.getElementById(
  'checkbox-select-all-master'
);

// 一括選択の対象となる個別チェックボックスをすべて取得
const itemCheckboxes = document.querySelectorAll(
  '.checkbox-select-all_item'
);

// 「すべて選択」の状態が変更されたときの処理
masterCheckbox.addEventListener('change', () => {

  // 「すべて選択」と同じ状態を各チェックボックスへ反映
  itemCheckboxes.forEach((itemCheckbox) => {
    itemCheckbox.checked = masterCheckbox.checked;
  });

});

// 各チェックボックスへ変更イベントを設定
itemCheckboxes.forEach((itemCheckbox) => {

  // 個別チェックボックスの状態が変更されたときの処理
  itemCheckbox.addEventListener('change', () => {

    // すべての個別チェックボックスが選択されているか確認
    const allItemsChecked = [...itemCheckboxes].every(
      (checkbox) => checkbox.checked
    );

    // 全項目が選択されている場合だけ「すべて選択」をオンにする
    masterCheckbox.checked = allItemsChecked;

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでチェックボックスを配置し、CSSで見た目を整え、JavaScriptで「すべて選択」と個別チェックボックスを連動させています。個別項目をまとめて選択・解除したいフォームや設定画面などでそのまま利用できます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
チェックボックスのレイアウトや項目を管理します。項目名や追加・削除したいチェックボックスは、このファイルを編集します。

style.css
チェックボックス全体のデザインを管理します。色・余白・角丸・文字サイズ・枠線・レスポンシブ表示などを変更できます。

script.js
「すべて選択」の動作と、個別チェックボックスとの連動処理を管理します。

設置方法・使い方
sampleフォルダ内のファイルをそのまま配置し、index.htmlをブラウザで開くと利用できます。「すべて選択」をクリックすると全項目を一括で選択・解除できます。また、個別のチェックボックスをすべて選択すると、「すべて選択」も自動でチェックされます。

カスタマイズできる内容
index.htmlではチェックボックスの追加・削除や項目名の変更ができます。style.cssでは背景色・文字色・余白・枠線・角丸・チェックボックスのサイズなどを変更できます。script.jsでは一括選択の対象となるチェックボックスや動作内容を用途に合わせて変更できます。

数値調整
max-width:700px
全体の最大横幅です。値を大きくすると横幅が広くなります。

padding:32px
コンテンツ内側の余白です。値を大きくすると余白が広くなります。

gap:12px
チェックボックス同士の間隔です。値を大きくすると項目の間隔が広がります。

min-height:56px
各チェックボックスの高さです。値を大きくするとクリックしやすくなります。

width:22px / height:22px
チェックボックス本体のサイズです。値を変更するとチェックボックスの大きさが変わります。

font-size:22px / 16px
タイトルや本文の文字サイズです。値を大きくすると文字が大きく表示されます。

border-radius:18px / 12px
コンテナや各項目の角丸です。値を大きくすると丸みが強くなります。

レスポンシブ対応
style.cssでレスポンシブ対応しています。width:100%、max-width:700px、paddingの調整、640px以下のメディアクエリを使用しており、スマートフォン・タブレット・PCでも画面幅に合わせて見やすく表示されます。