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

項目・並び方向・サイズ・色・枠線・角丸などを設定して、HTML・CSSを自動生成できます。

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

複数のチェックボックスをまとめて選択・解除できる、一括選択機能付きチェックボックスを作る方法を紹介します。このサンプルでは、「すべて選択」というチェックボックスと、「HTML」「CSS」「JavaScript」「PHP」「Python」の5つの個別チェックボックスを用意します。「すべて選択」へチェックを入れるとすべての個別項目が選択され、チェックを外すとすべての選択が解除されます。

HTMLで一括選択用と個別項目用のチェックボックスを配置し、CSSで一覧のデザインを設定します。JavaScriptでは「すべて選択」のチェック状態が変化したことを検知し、その状態をすべての個別チェックボックスへ反映します。また、個別項目を操作した場合も選択状態を確認し、すべての個別項目が選択されると「すべて選択」も自動でチェックされます。

設定画面やアンケート、権限設定、商品一覧など、複数の項目をまとめて選択させたい場合に利用できます。個別項目を追加する場合は、同じクラスを設定したチェックボックスをHTMLへ追加することで一括選択の対象にできます。外部ライブラリや外部サービスは使用せず、HTML・CSS・JavaScriptの3ファイルだけで動作します。画面幅640px以下では余白を調整するレスポンシブ対応も行っています。

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

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

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

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

すべて選択 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_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">

        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="html">

        <span class="checkbox-select-all_name">
          HTML
        </span>

      </label>

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

        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="css">

        <span class="checkbox-select-all_name">
          CSS
        </span>

      </label>

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

        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="javascript">

        <span class="checkbox-select-all_name">
          JavaScript
        </span>

      </label>

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

        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="php">

        <span class="checkbox-select-all_name">
          PHP
        </span>

      </label>

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

        <input
          class="checkbox-select-all_input checkbox-select-all_item"
          type="checkbox"
          name="interest[]"
          value="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,
.checkbox-select-all_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

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

/* チェックボックス一覧 */
.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; /* マウスカーソルを指型へ変更 */
}

/* 一括選択用の項目 */
.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の余白。値を大きくすると項目名との間隔が広がる */
  flex:0 0 auto; /* 横幅が狭くてもチェックボックスのサイズを固定 */
  accent-color:#0b6bff; /* チェック時に表示する色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* キーボード操作時のフォーカス表示 */
.checkbox-select-all_input:focus-visible{
  outline:3px solid rgba(11,107,255,.22); /* フォーカス枠の太さ・種類・色 */
  outline-offset:3px; /* チェックボックスとフォーカス枠の間隔 */
}

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

/* 画面幅640px以下 */
@media (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(
      (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では「すべて選択」と個別チェックボックスのチェック状態を相互に連動させます。

「すべて選択」のチェック状態が変化すると、その状態をすべての.checkbox-select-all_itemへ反映します。個別項目を操作した場合は、すべての個別チェックボックスが選択されているかを確認し、全項目が選択されている場合だけ「すべて選択」もチェック状態になります。

外部ライブラリや外部サービス、API、画像などは使用していません。APIキーやURLなど利用者自身で用意する情報もなく、sampleフォルダ内の3ファイルだけで動作します。初期状態では「すべて選択」とすべての個別項目がチェックされていない状態で表示されます。

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

各ファイルの役割
index.htmlは、一括選択用の「すべて選択」と、HTML・CSS・JavaScript・PHP・Pythonの個別チェックボックスを記述するファイルです。一括選択の対象となる個別チェックボックスには共通してcheckbox-select-all_itemクラスを設定しています。項目名や項目数を変更する場合は、このファイルを編集します。

style.cssは、チェックボックス全体、一覧、各チェックボックス項目、「すべて選択」の項目、チェックボックス本体などのデザインを設定するファイルです。「すべて選択」は個別項目と区別しやすいように背景色と枠線色を変更しています。画面幅640px以下で余白を調整するレスポンシブ設定も、このファイルに記述しています。

script.jsは、「すべて選択」と個別チェックボックスを連動させるファイルです。「すべて選択」が変更された場合は、そのcheckedの状態をすべての個別項目へ設定します。個別項目が変更された場合はevery()ですべての項目がチェックされているかを確認し、その結果を「すべて選択」へ反映します。

設置方法・使い方
sampleフォルダを作成し、その中へindex.html、style.css、script.jsを同じ階層で配置します。index.htmlでは<link rel="stylesheet" href="style.css">でstyle.cssを読み込み、<script src="script.js"></script>でscript.jsを読み込む構成になっています。3ファイルを配置したら、sample/index.htmlをブラウザで開きます。

「すべて選択」へチェックを入れると、HTML・CSS・JavaScript・PHP・Pythonのすべての個別項目へチェックが入ります。「すべて選択」のチェックを外すと、すべての個別項目のチェックも解除されます。

個別項目だけを操作することもできます。すべての個別項目へチェックを入れると「すべて選択」も自動でチェックされます。その状態から個別項目を1つでも解除すると、「すべて選択」のチェックも解除されます。

個別項目を追加する場合は、checkbox-select-all_itemクラスを設定した<input type="checkbox">を一覧へ追加します。同じクラスが付いているチェックボックスが一括選択の対象になるため、基本的なJavaScriptを変更せずに項目数を増やせます。

カスタマイズできる内容
index.htmlでは、個別チェックボックスの項目名、name、value、項目数、「すべて選択」という表示文字を変更できます。一括選択の対象へ追加したいチェックボックスにはcheckbox-select-all_itemクラスを設定します。

style.cssでは、全体の最大横幅・余白・枠線・角丸・背景色、各チェックボックス項目の高さ・余白・枠線、「すべて選択」の背景色、チェックボックス本体の大きさや色、項目名の文字サイズなどを変更できます。

script.jsでは、「すべて選択」の状態を個別項目へ反映する処理と、個別項目の状態から「すべて選択」を更新する処理を行っています。一括選択の対象は.checkbox-select-all_itemで取得しているため、HTML側のクラスを使って対象を管理できます。

数値調整
style.css

padding:40px 20px;
ページ全体の余白です。40pxが上下、20pxが左右を表します。値を大きくすると画面端との間隔が広がります。

max-width:700px;
チェックボックス全体の最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。

margin:40px auto;
チェックボックス全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。

padding:32px;
チェックボックス全体の内側余白です。値を大きくすると外枠と一覧との間隔が広がります。

border:1px solid #dfe7f0;
チェックボックス全体と各項目の枠線です。1pxを大きくすると枠線が太くなります。

border-radius:18px;
チェックボックス全体の角丸です。値を大きくすると丸みが強くなります。

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

min-height:56px;
各チェックボックス項目の最小高さです。値を大きくすると項目が高くなります。

padding:14px 18px;
各チェックボックス項目の内側余白です。14pxが上下、18pxが左右を表します。値を大きくすると枠線と内容との間隔が広がります。

border-radius:12px;
各チェックボックス項目の角丸です。値を大きくすると丸みが強くなります。

margin-bottom:6px;
「すべて選択」の下側へ追加する余白です。値を大きくすると個別項目との間隔が広がります。

width:22px;・height:22px;
チェックボックス本体の横幅と高さです。値を大きくするとチェックボックスが大きくなります。

margin:0 14px 0 0;
チェックボックス本体の右側へ14pxの余白を設定しています。値を大きくするとチェックボックスと項目名との間隔が広がります。

outline:3px solid rgba(11,107,255,.22);
キーボード操作でチェックボックスへフォーカスしたときの枠線です。3pxを大きくするとフォーカス枠が太くなります。

outline-offset:3px;
チェックボックスとフォーカス枠との間隔です。値を大きくするとフォーカス枠が外側へ離れます。

font-size:16px;
各チェックボックスの項目名の文字サイズです。値を大きくすると文字が大きくなります。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。.checkbox-select-all_wrapへwidth:100%とmax-width:700pxを設定しているため、最大700pxを基準にしながら画面幅に合わせて全体が縮小します。

画面幅640px以下では@media (max-width:640px)を使用し、ページ全体の余白を24px 12pxへ変更します。チェックボックス全体の上下余白を24px、内側余白を24px 18pxへ縮小し、各チェックボックス項目の内側余白も14pxへ調整しているため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。