チェックした件数を表示するチェックボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

チェックした件数を表示するチェックボックスを作る方法

チェックボックスで選択した項目の件数を表示する方法を紹介します。このサンプルでは、「HTML」「CSS」「JavaScript」「PHP」「Python」の5つのチェックボックスを用意し、チェックを入れるたびに現在選択されている件数を自動で更新します。チェックを外した場合も件数が更新されるため、利用者が現在いくつの項目を選択しているのかをすぐに確認できます。

HTMLでチェックボックス一覧と件数の表示エリアを作成し、CSSで全体のレイアウトやチェックボックス、件数表示のデザインを設定します。JavaScriptでは各チェックボックスの変更を検知し、チェックされている要素を取得して件数を数えます。取得した件数を表示エリアへ反映することで、選択・解除に合わせて「選択件数：0件」「選択件数：1件」のように表示を切り替えます。

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

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

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

デモ

チェックした件数

項目を選択すると件数が自動で更新されます。

選択件数：0件

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-count_wrap">

    <!-- 現在チェックされている件数を表示するエリア -->
    <div class="checkbox-count_result">
      選択件数：<span id="checkbox-count-number">0</span>件
    </div>

    <!-- 件数を数えるチェックボックス一覧 -->
    <div class="checkbox-count_list">

      <!-- HTMLのチェックボックス -->
      <label class="checkbox-count_label">
        <input class="checkbox-count_input" type="checkbox">
        <span class="checkbox-count_name">HTML</span>
      </label>

      <!-- CSSのチェックボックス -->
      <label class="checkbox-count_label">
        <input class="checkbox-count_input" type="checkbox">
        <span class="checkbox-count_name">CSS</span>
      </label>

      <!-- JavaScriptのチェックボックス -->
      <label class="checkbox-count_label">
        <input class="checkbox-count_input" type="checkbox">
        <span class="checkbox-count_name">JavaScript</span>
      </label>

      <!-- PHPのチェックボックス -->
      <label class="checkbox-count_label">
        <input class="checkbox-count_input" type="checkbox">
        <span class="checkbox-count_name">PHP</span>
      </label>

      <!-- Pythonのチェックボックス -->
      <label class="checkbox-count_label">
        <input class="checkbox-count_input" type="checkbox">
        <span class="checkbox-count_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-count_wrap,
.checkbox-count_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

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

/* 選択件数の表示エリア */
.checkbox-count_result{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると一覧との間隔が広がる */
  padding:14px; /* 件数表示の内側余白。値を大きくすると表示エリアが広がる */
  border-radius:12px; /* 件数表示の角丸。値を大きくすると丸みが強くなる */
  background:#eaf3ff; /* 件数表示の背景色 */
  color:#0b6bff; /* 件数表示の文字色 */
  font-size:18px; /* 件数表示の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 件数表示を太字にする */
  line-height:1.5; /* 件数表示の行間 */
  text-align:center; /* 件数表示を中央揃えにする */
}

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

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

/* チェックボックス本体 */
.checkbox-count_input{
  width:22px; /* チェックボックスの横幅。値を大きくすると横方向へ大きくなる */
  height:22px; /* チェックボックスの高さ。値を大きくすると縦方向へ大きくなる */
  margin:0; /* ブラウザ標準の外側余白を削除 */
  flex:0 0 auto; /* チェックボックスのサイズを固定 */
  accent-color:#0b6bff; /* チェック時に表示する色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

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

/* 各項目の名前 */
.checkbox-count_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-count_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
  }

  /* スマートフォン表示時の各チェックボックス項目 */
  .checkbox-count_label{
    padding:14px; /* 内側余白を14pxへ縮小 */
  }

}

// ======================================================
// 件数を数えるチェックボックスをすべて取得
// ======================================================
const checkboxCountInputs =
  document.querySelectorAll(
    '.checkbox-count_input'
  );

// ======================================================
// 選択件数を表示する要素を取得
// ======================================================
const checkboxCountNumber =
  document.getElementById(
    'checkbox-count-number'
  );

// ======================================================
// 現在チェックされている件数を更新
// ======================================================
function updateCheckboxCount(){

  // チェックされているチェックボックスだけを取得
  const checkedInputs =
    document.querySelectorAll(
      '.checkbox-count_input:checked'
    );

  // 取得したチェックボックスの件数を画面へ表示
  checkboxCountNumber.textContent =
    checkedInputs.length;

}

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

    // チェックまたはチェック解除のたびに件数を更新
    checkbox.addEventListener(
      'change',
      updateCheckboxCount
    );

  }
);

// ======================================================
// ページ表示時のチェック状態を件数へ反映
// ======================================================
updateCheckboxCount();

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで選択件数の表示エリアとチェックボックス一覧を作成し、CSSで全体のレイアウトや件数表示、各チェックボックスのデザインを設定します。JavaScriptではチェックされているチェックボックスを取得し、その件数を画面へ表示します。

JavaScriptは.checkbox-count_inputが付いたチェックボックスを対象とし、チェック状態が変更されるたびに現在チェックされている要素を数えます。取得した件数はcheckbox-count-numberへ反映されるため、チェックを入れると件数が増え、チェックを外すと件数が減ります。

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

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

各ファイルの役割
index.htmlは、現在の選択件数を表示するエリアと、件数を数える対象となるチェックボックス一覧を記述するファイルです。各チェックボックスには共通してcheckbox-count_inputクラスを設定しています。項目名や項目数を変更する場合は、このファイルを編集します。

style.cssは、チェックボックス全体、選択件数の表示エリア、チェックボックス一覧、各項目のデザインを設定するファイルです。最大横幅、余白、背景色、枠線、角丸、文字サイズ、チェックボックスの大きさなどを設定しています。画面幅640px以下で余白を調整するレスポンシブ設定も、このファイルに記述しています。

script.jsは、現在チェックされている件数を数えて表示するファイルです。.checkbox-count_input:checkedに一致するチェックボックスを取得し、その件数をlengthで確認してcheckbox-count-numberへ表示します。各チェックボックスの状態が変更されるたびに同じ処理を実行します。

設置方法・使い方
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をブラウザで開きます。

初期状態では「選択件数：0件」と表示されます。HTMLへチェックを入れると「選択件数：1件」、さらにCSSへチェックを入れると「選択件数：2件」のように、現在チェックされている件数へ自動で更新されます。チェックを外した場合は、その分だけ件数が減ります。

項目を追加する場合は、checkbox-count_inputクラスを設定した<input type="checkbox">を追加します。同じクラスが付いているチェックボックスが件数を数える対象になるため、基本的なJavaScriptを変更せずに項目数を増やせます。

カスタマイズできる内容
index.htmlでは、チェックボックスの項目名や項目数、件数表示の「選択件数：」「件」という文字を変更できます。チェックボックスを追加または削除することで、用途に合わせた選択項目へ変更できます。件数を数える対象にはcheckbox-count_inputクラスを設定してください。

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

script.jsでは、.checkbox-count_input:checkedで現在チェックされている要素を取得し、そのlengthを件数として表示しています。表示形式を変更したい場合は、checkboxCountNumber.textContentへ設定する内容を変更できます。

数値調整
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;
チェックボックス全体の角丸です。値を大きくすると丸みが強くなります。

margin:0 0 24px;
選択件数の表示エリアの下側余白です。24pxを大きくするとチェックボックス一覧との間隔が広がります。

padding:14px;
選択件数の表示エリアの内側余白です。値を大きくすると表示エリアが高くなります。

border-radius:12px;
選択件数の表示エリアと各チェックボックス項目の角丸です。値を大きくすると丸みが強くなります。

font-size:18px;
選択件数の文字サイズです。値を大きくすると件数表示の文字が大きくなります。

gap:14px;
チェックボックス一覧では項目同士の間隔、各項目ではチェックボックスと項目名の間隔として使用しています。値を大きくするとそれぞれの間隔が広がります。

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

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

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

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

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

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

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

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