チェックで項目の表示・非表示を切り替えるチェックボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

チェックで項目の表示・非表示を切り替えるチェックボックスを作る方法

チェックボックスを使って、対応する項目の表示・非表示を切り替える方法を紹介します。このサンプルでは、「HTML」「CSS」「JavaScript」「PHP」「Python」の5つのチェックボックスを用意し、チェックを入れると対応する項目が下の表示エリアへ表示され、チェックを外すと非表示へ戻ります。複数のチェックボックスを選択すれば、複数の項目を同時に表示できます。

HTMLで操作用のチェックボックスと表示・非表示を切り替える対象項目を作成し、CSSでチェックボックスや表示エリア、各項目のデザインを設定します。JavaScriptではチェックボックスのvalueと、対象項目に設定したdata-itemを対応させます。チェックされている項目にはis-showクラスを追加して表示し、チェックを外すとis-showクラスを取り除いて非表示にします。

初期状態では対象項目をすべて非表示にし、「表示する項目を選択してください。」という案内を表示します。チェックを入れるたびに対応する項目が表示され、チェックを外すと再び非表示になります。カテゴリーや条件による一覧の絞り込み、利用者が必要な情報だけを選んで表示する画面など、チェックボックスの状態に合わせて内容の表示・非表示を切り替えたい場合に利用できます。画面幅640px以下ではチェック項目の配置や余白を調整するレスポンシブ対応も行っています。

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

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

デモ

チェックで表示・非表示を切り替え

表示したい項目へチェックを入れてください。

HTML CSS JavaScript PHP Python

表示中の項目

表示する項目を選択してください。

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-show-selected_wrap">

    <!-- 表示・非表示を操作するチェックボックス一覧 -->
    <div
      class="checkbox-show-selected_controls"
      aria-label="表示・非表示を切り替える項目">

      <!-- HTMLの表示・非表示を切り替えるチェックボックス -->
      <label class="checkbox-show-selected_label">

        <input
          class="checkbox-show-selected_input"
          type="checkbox"
          value="HTML">

        <span>HTML</span>

      </label>

      <!-- CSSの表示・非表示を切り替えるチェックボックス -->
      <label class="checkbox-show-selected_label">

        <input
          class="checkbox-show-selected_input"
          type="checkbox"
          value="CSS">

        <span>CSS</span>

      </label>

      <!-- JavaScriptの表示・非表示を切り替えるチェックボックス -->
      <label class="checkbox-show-selected_label">

        <input
          class="checkbox-show-selected_input"
          type="checkbox"
          value="JavaScript">

        <span>JavaScript</span>

      </label>

      <!-- PHPの表示・非表示を切り替えるチェックボックス -->
      <label class="checkbox-show-selected_label">

        <input
          class="checkbox-show-selected_input"
          type="checkbox"
          value="PHP">

        <span>PHP</span>

      </label>

      <!-- Pythonの表示・非表示を切り替えるチェックボックス -->
      <label class="checkbox-show-selected_label">

        <input
          class="checkbox-show-selected_input"
          type="checkbox"
          value="Python">

        <span>Python</span>

      </label>

    </div>

    <!-- 表示・非表示を切り替える対象エリア -->
    <div class="checkbox-show-selected_result">

      <!-- 何も表示されていないときの案内 -->
      <p
        class="checkbox-show-selected_empty"
        id="checkbox-show-selected-empty">
        表示する項目を選択してください。
      </p>

      <!-- 表示・非表示を切り替える対象項目一覧 -->
      <div class="checkbox-show-selected_list">

        <div
          class="checkbox-show-selected_item"
          data-item="HTML">
          HTML
        </div>

        <div
          class="checkbox-show-selected_item"
          data-item="CSS">
          CSS
        </div>

        <div
          class="checkbox-show-selected_item"
          data-item="JavaScript">
          JavaScript
        </div>

        <div
          class="checkbox-show-selected_item"
          data-item="PHP">
          PHP
        </div>

        <div
          class="checkbox-show-selected_item"
          data-item="Python">
          Python
        </div>

      </div>

    </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-show-selected_wrap,
.checkbox-show-selected_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

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

/* 表示・非表示を操作するチェックボックス一覧 */
.checkbox-show-selected_controls{
  display:grid; /* チェックボックスをグリッドで配置 */
  grid-template-columns:repeat(5,1fr); /* 5項目を同じ横幅で横並びにする */
  gap:10px; /* 項目同士の間隔。値を大きくすると間隔が広がる */
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると対象エリアとの間隔が広がる */
}

/* 各チェックボックス項目 */
.checkbox-show-selected_label{
  display:flex; /* チェックボックスと文字を横並びにする */
  align-items:center; /* チェックボックスと文字を縦方向の中央へ揃える */
  justify-content:center; /* 内容を横方向の中央へ配置 */
  gap:8px; /* チェックボックスと文字の間隔 */
  min-height:48px; /* 項目の最小高さ。値を大きくすると項目が高くなる */
  padding:10px; /* 項目の内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #d1d5db; /* 項目を囲む枠線の太さ・種類・色 */
  border-radius:10px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  color:#111827; /* 項目名の文字色 */
  font-size:14px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字にする */
  line-height:1.5; /* 項目名の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

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

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

/* 表示・非表示を切り替える対象エリア */
.checkbox-show-selected_result{
  padding:20px; /* 対象エリアの内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #bfdbfe; /* 対象エリアを囲む枠線の太さ・種類・色 */
  border-radius:12px; /* 対象エリアの角丸。値を大きくすると丸みが強くなる */
  background:#eff6ff; /* 対象エリアの背景色 */
}

/* 表示・非表示を切り替える対象項目一覧 */
.checkbox-show-selected_list{
  display:grid; /* 対象項目を縦方向のグリッドで配置 */
  gap:10px; /* 対象項目同士の間隔。値を大きくすると縦方向の間隔が広がる */
}

/* 表示・非表示を切り替える各項目 */
.checkbox-show-selected_item{
  display:none; /* 初期状態では項目を非表示 */
  min-height:52px; /* 対象項目の最小高さ。値を大きくすると項目が高くなる */
  padding:14px 16px; /* 上下14px・左右16pxの内側余白 */
  border:1px solid #dbeafe; /* 対象項目を囲む枠線の太さ・種類・色 */
  border-radius:10px; /* 対象項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 対象項目の背景色 */
  color:#2563eb; /* 対象項目の文字色 */
  font-size:16px; /* 対象項目の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 対象項目を太字にする */
  line-height:1.5; /* 対象項目の行間 */
}

/* チェックされている項目へ追加する表示用クラス */
.checkbox-show-selected_item.is-show{
  display:flex; /* 対象となる項目を表示 */
  align-items:center; /* 項目内の文字を縦方向の中央へ配置 */
}

/* 何も表示されていないときの案内 */
.checkbox-show-selected_empty{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#64748b; /* 案内文の文字色 */
  font-size:15px; /* 案内文の文字サイズ */
  line-height:1.7; /* 案内文の行間 */
}

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

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
  }

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

  /* スマートフォン表示時のチェックボックス一覧 */
  .checkbox-show-selected_controls{
    grid-template-columns:repeat(2,1fr); /* 5列から2列へ変更 */
  }

  /* スマートフォン表示時の各チェックボックス項目 */
  .checkbox-show-selected_label{
    justify-content:flex-start; /* 内容を左揃えへ変更 */
    padding:10px 12px; /* 上下10px・左右12pxの内側余白 */
  }

  /* スマートフォン表示時の対象項目 */
  .checkbox-show-selected_item{
    padding:12px 14px; /* 上下12px・左右14pxへ縮小 */
  }

}

// ======================================================
// 表示・非表示を操作するチェックボックスをすべて取得
// ======================================================
const checkboxShowSelectedInputs =
  document.querySelectorAll(
    '.checkbox-show-selected_input'
  );

// ======================================================
// 表示・非表示を切り替える対象項目をすべて取得
// ======================================================
const checkboxShowSelectedItems =
  document.querySelectorAll(
    '.checkbox-show-selected_item'
  );

// ======================================================
// 何も表示されていないときの案内を取得
// ======================================================
const checkboxShowSelectedEmpty =
  document.getElementById(
    'checkbox-show-selected-empty'
  );

// ======================================================
// チェック状態に合わせて項目の表示・非表示を更新
// ======================================================
function updateCheckboxShowSelected(){

  // 現在表示している項目数を初期化
  let visibleCount = 0;

  // 各対象項目を順番に確認
  checkboxShowSelectedItems.forEach((item) => {

    // data-itemから対応する値を取得
    const targetValue = item.dataset.item;

    // 同じvalueを持つチェックボックスを検索
    const targetCheckbox =
      [...checkboxShowSelectedInputs].find(
        (checkbox) =>
          checkbox.value === targetValue
      );

    // 対応するチェックボックスがチェックされているか確認
    const isChecked =
      targetCheckbox &&
      targetCheckbox.checked;

    // チェック状態に合わせて表示用クラスを切り替え
    item.classList.toggle(
      'is-show',
      isChecked
    );

    // 表示されている項目がある場合は件数を加算
    if (isChecked) {
      visibleCount++;
    }

  });

  // 1件以上表示されている場合は案内文を非表示
  checkboxShowSelectedEmpty.hidden =
    visibleCount > 0;

}

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

    // チェック状態が変わるたびに表示・非表示を更新
    checkbox.addEventListener(
      'change',
      updateCheckboxShowSelected
    );

  }
);

// ======================================================
// ページ表示時の状態を反映
// ======================================================
updateCheckboxShowSelected();

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで操作用のチェックボックスと表示・非表示を切り替える対象項目を作成し、CSSでチェックボックスや対象エリア、各項目のデザインと表示状態を設定します。JavaScriptではチェックボックスの状態を確認し、チェックのON・OFFに合わせて対応する項目の表示・非表示を切り替えます。

操作用チェックボックスのvalueと、対象項目のdata-itemを対応させる仕組みです。たとえばvalue="HTML"のチェックボックスへチェックを入れると、data-item="HTML"を持つ項目へis-showクラスが追加されて表示されます。チェックを外すとis-showクラスが取り除かれ、その項目は非表示へ戻ります。

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

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

各ファイルの役割
index.htmlは、表示・非表示を操作するチェックボックスと対象項目を記述するファイルです。チェックボックスにはvalue、対象項目にはdata-itemを設定し、同じ値を指定することで両者を対応させています。また、何も表示されていないときの案内文もindex.htmlに記述しています。項目名や表示内容を変更する場合は、このファイルを編集します。

style.cssは、チェックボックス全体、操作用チェックボックス、対象エリア、表示・非表示を切り替える各項目のデザインを設定するファイルです。.checkbox-show-selected_itemには初期状態としてdisplay:noneを設定し、is-showクラスが付いた場合だけdisplay:flexで表示します。画面幅640px以下でチェックボックスの配置や余白を変更するレスポンシブ設定も、このファイルに記述しています。

script.jsは、チェックボックスの状態に合わせて対象項目の表示・非表示を切り替えるファイルです。各対象項目のdata-itemを取得し、同じ値をvalueに持つチェックボックスを検索します。チェックされている場合はis-showクラスを追加し、チェックされていない場合は取り除きます。また、現在表示されている項目数を確認し、1件以上表示されている場合は初期案内を非表示にします。

設置方法・使い方
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の対象項目はすべて非表示になり、「表示する項目を選択してください。」という案内が表示されます。操作用チェックボックスへチェックを入れると対応する項目が表示され、チェックを外すと再び非表示になります。複数のチェックボックスへチェックを入れれば、複数の項目を同時に表示できます。すべてのチェックを外すと対象項目がすべて非表示になり、案内文が再び表示されます。

項目を変更または追加する場合は、チェックボックスのvalueと対象項目のdata-itemへ同じ値を設定します。たとえばチェックボックスをvalue="Design"とした場合、対応する対象項目にはdata-item="Design"を設定します。この2つの値が一致していることで、JavaScriptがどの項目の表示・非表示を切り替えるか判断できます。

カスタマイズできる内容
index.htmlでは、操作用チェックボックスの項目名、value、表示・非表示を切り替える対象内容、data-item、何も表示されていないときの案内文を変更できます。項目数を増やす場合は、操作用チェックボックスと対応する対象項目を追加し、valueとdata-itemへ同じ値を設定します。対象項目の表示内容はチェックボックスと同じ文字にする必要はなく、対応する値が一致していれば文章やその他の内容へ変更できます。

style.cssでは、全体の最大横幅・余白・枠線・角丸・背景色、チェックボックスの配置・サイズ・色、対象エリアの背景色、各項目の高さ・余白・文字色などを変更できます。表示・非表示の仕組みは、.checkbox-show-selected_itemのdisplay:noneと、.checkbox-show-selected_item.is-showのdisplay:flexで設定しています。

script.jsでは、チェック状態を確認してis-showクラスを切り替える処理と、現在表示されている項目数に応じて案内文を表示・非表示にする処理を行っています。HTML側のvalueとdata-itemを対応させれば、基本的なJavaScriptの処理を変更せずに項目を追加できます。

数値調整
style.css

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

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

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

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

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

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

grid-template-columns:repeat(5,1fr);
操作用チェックボックスを5列で配置する設定です。5の値を変更すると1行に配置する列数が変わります。

gap:10px;
操作用チェックボックス同士と、対象項目同士の間隔です。値を大きくすると項目間の余白が広がります。

margin:0 0 24px;
操作用チェックボックス一覧の下側余白です。24pxを大きくすると対象エリアとの間隔が広がります。

gap:8px;
チェックボックス本体と項目名の間隔です。値を大きくすると両者の間隔が広がります。

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

padding:10px;
操作用チェックボックス項目の内側余白です。値を大きくすると枠線と内容との間隔が広がります。

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

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

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

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

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

padding:20px;
対象エリアの内側余白です。値を大きくすると外枠と表示内容との間隔が広がります。

border-radius:12px;
対象エリアの角丸です。値を大きくすると丸みが強くなります。

min-height:52px;
表示・非表示を切り替える各項目の最小高さです。値を大きくすると項目が高くなります。

padding:14px 16px;
対象項目の内側余白です。14pxが上下、16pxが左右を表します。値を大きくすると枠線と文字との間隔が広がります。

font-size:16px;
対象項目の文字サイズです。値を大きくすると文字が大きくなります。

font-size:15px;
何も表示されていないときの案内文の文字サイズです。値を大きくすると案内文が大きく表示されます。

line-height:1.7;
案内文の行間です。値を大きくすると複数行になった場合の行間が広がります。

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

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