チェックすると選択した項目が消えるチェックボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

チェックすると選択した項目が消えるチェックボックスを作る方法

チェックボックスを選択すると、そのチェックボックスを含む項目が一覧から消える仕組みを作る方法を紹介します。このサンプルでは、「HTML」「CSS」「JavaScript」「PHP」「Python」の項目を一覧で表示し、各項目のチェックボックスへチェックを入れると、選択した行全体がすぐに画面から消えます。操作した項目そのものが消えるため、残っている項目だけを確認できます。

タスク一覧や確認作業、持ち物リストなどで、完了した項目をチェックしながら順番に取り除きたい場合に利用できます。チェックボックスと非表示にする項目が同じ行に配置されているため、別の操作エリアから対象を選ぶのではなく、消したい項目を直接チェックして操作できるのが特徴です。

HTMLでチェックボックスと項目名を配置し、CSSで一覧のデザインと非表示状態を設定します。JavaScriptではチェックボックスの状態が変化したことを検知し、チェックされた場合にそのチェックボックスを含む項目へis-hiddenクラスを追加します。項目名や項目数はHTMLから変更でき、背景色、余白、文字サイズ、枠線、角丸、チェックボックスの大きさなどはCSSから調整できます。外部ライブラリを使用せず、画面幅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-hide-selected_wrap">

    <!-- チェックボックスエリアのタイトル -->
    <div class="checkbox-hide-selected_title">
      チェックすると選択した項目が消える
    </div>

    <!-- 操作方法を案内する説明文 -->
    <p class="checkbox-hide-selected_text">
      消したい項目へチェックを入れてください。
    </p>

    <!-- チェックすると非表示になる項目一覧 -->
    <div class="checkbox-hide-selected_list">

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

        <!-- HTML項目の選択状態を管理するチェックボックス -->
        <input
          class="checkbox-hide-selected_input"
          type="checkbox"
          name="completed[]"
          value="HTML">

        <!-- HTMLの項目名 -->
        <span class="checkbox-hide-selected_name">
          HTML
        </span>

      </label>

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

        <!-- CSS項目の選択状態を管理するチェックボックス -->
        <input
          class="checkbox-hide-selected_input"
          type="checkbox"
          name="completed[]"
          value="CSS">

        <!-- CSSの項目名 -->
        <span class="checkbox-hide-selected_name">
          CSS
        </span>

      </label>

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

        <!-- JavaScript項目の選択状態を管理するチェックボックス -->
        <input
          class="checkbox-hide-selected_input"
          type="checkbox"
          name="completed[]"
          value="JavaScript">

        <!-- JavaScriptの項目名 -->
        <span class="checkbox-hide-selected_name">
          JavaScript
        </span>

      </label>

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

        <!-- PHP項目の選択状態を管理するチェックボックス -->
        <input
          class="checkbox-hide-selected_input"
          type="checkbox"
          name="completed[]"
          value="PHP">

        <!-- PHPの項目名 -->
        <span class="checkbox-hide-selected_name">
          PHP
        </span>

      </label>

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

        <!-- Python項目の選択状態を管理するチェックボックス -->
        <input
          class="checkbox-hide-selected_input"
          type="checkbox"
          name="completed[]"
          value="Python">

        <!-- Pythonの項目名 -->
        <span class="checkbox-hide-selected_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-hide-selected_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-hide-selected_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

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

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

/* 各チェックボックス項目 */
.checkbox-hide-selected_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; /* 項目の背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  box-sizing:border-box; /* paddingとborderを横幅と高さへ含める */
}

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

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

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

/* チェックされた項目へ追加する非表示用クラス */
.checkbox-hide-selected_label.is-hidden{
  display:none; /* チェックした項目全体を画面から非表示にする */
}

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

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

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

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

}

// ======================================================
// チェックすると非表示になるチェックボックスをすべて取得
// ======================================================
const checkboxHideSelectedInputs =
  document.querySelectorAll(
    '.checkbox-hide-selected_input'
  );

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

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

        // チェックされていない場合は処理を終了
        if (!checkbox.checked) {
          return;
        }

        // 選択されたチェックボックスを含む項目全体を取得
        const selectedItem =
          checkbox.closest(
            '.checkbox-hide-selected_label'
          );

        // 対象となる項目を取得できなかった場合は処理を終了
        if (!selectedItem) {
          return;
        }

        // 非表示用クラスを追加して選択した項目全体を消す
        selectedItem.classList.add(
          'is-hidden'
        );

      }
    );

  }
);

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでチェックボックスと項目名を配置し、CSSで一覧のデザインと非表示状態を設定します。JavaScriptでは各チェックボックスの状態が変化したことを検知し、チェックされたチェックボックスを含む項目全体へ非表示用のクラスを追加します。

各チェックボックスと項目名は同じlabel要素の中へ配置しています。チェックボックスへチェックを入れると、JavaScriptのclosest()でそのチェックボックスを含む.checkbox-hide-selected_labelを取得し、is-hiddenクラスを追加します。CSSではis-hiddenクラスが付いた項目へdisplay:noneを適用するため、選択した項目そのものが一覧から消えます。

外部ライブラリや外部サービス、API、画像などは使用していません。APIキーやURLなど利用者自身で用意する情報もなく、sampleフォルダ内の3ファイルだけで動作します。チェックすると対象の行自体が非表示になるため、配布コードでは非表示になった項目を同じチェックボックスから元へ戻す操作はありません。

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

各ファイルの役割
index.htmlは、チェックボックスと項目名を一覧として配置するファイルです。「HTML」「CSS」「JavaScript」「PHP」「Python」の各項目をlabel要素で作成し、その中へチェックボックスと項目名を配置しています。チェックボックスと非表示になる行が同じ要素内にあるため、チェックされた位置から対象となる行を取得できます。項目名や項目数を変更する場合は、このファイルを編集します。

style.cssは、チェックボックス全体、タイトル、説明文、一覧、各項目、チェックボックス本体などのデザインを設定するファイルです。.checkbox-hide-selected_label.is-hiddenへdisplay:noneを設定しており、JavaScriptからis-hiddenクラスが追加された項目だけを非表示にします。画面幅640px以下で余白を調整するレスポンシブ設定も、このファイルに記述しています。

script.jsは、チェックされた項目を一覧から消す処理を行うファイルです。すべての.checkbox-hide-selected_inputへchangeイベントを設定し、チェックされた場合にclosest()を使って親となる.checkbox-hide-selected_labelを取得します。その項目へis-hiddenクラスを追加することで、選択した行全体を非表示にします。

設置方法・使い方
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の5つの項目が表示されます。消したい項目のチェックボックスへチェックを入れると、そのチェックボックスを含む行全体がすぐに一覧から消えます。たとえばHTMLへチェックを入れるとHTMLの行が非表示になり、残りのCSS・JavaScript・PHP・Pythonだけが表示されます。

このサンプルではチェックした行そのものが非表示になるため、非表示になった項目のチェックボックスも同時に画面から消えます。ページを再読み込みすると初期状態へ戻り、すべての項目が再び表示されます。

カスタマイズできる内容
index.htmlでは、タイトル、説明文、チェックボックスの項目名、項目数などを変更できます。新しい項目を追加する場合は、既存の.checkbox-hide-selected_labelと同じ構造でlabel要素を追加し、その中へ.checkbox-hide-selected_inputを持つチェックボックスと.checkbox-hide-selected_nameを持つ項目名を配置します。

チェックボックスに設定しているname="completed[]"やvalueは用途に合わせて変更できます。このサンプルの非表示処理では、JavaScriptがチェックされた要素からclosest('.checkbox-hide-selected_label')で親要素を取得しているため、項目名やvalueを変更しても非表示処理そのものには影響しません。

style.cssでは、全体の最大横幅・余白・枠線・角丸・背景色、各項目の高さや余白、チェックボックスの大きさ、文字サイズなどを変更できます。非表示処理に使用している.checkbox-hide-selected_label.is-hiddenのdisplay:noneは、チェックした項目を消すための設定です。

数値調整
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 12px;
タイトル下側の余白です。12pxを大きくすると説明文との間隔が広がります。

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

line-height:1.5;
タイトルと項目名に設定している行間です。値を大きくすると複数行になった場合の行間が広がります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると説明文とチェックボックス一覧との間隔が広がります。

font-size:16px;
説明文と各項目名の文字サイズです。値を大きくすると文字が大きく表示されます。

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

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

min-height:56px;
各チェックボックス項目の最小高さです。値を大きくすると項目が高くなり、クリックやタップできる範囲も広がります。

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

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

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

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

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

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

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

画面幅640px以下では@media screen and (max-width:640px)を使用し、ページ全体の余白を24px 12pxへ変更します。チェックボックス全体は上下余白を24px、内側余白を24px 18pxへ縮小し、各項目の内側余白も14pxへ調整します。これにより、スマートフォンなど横幅の狭い画面でも項目が画面内へ収まりやすくなります。