ページを移動しても選択状態を記憶するチェックボックスの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動しても選択状態を記憶するチェックボックスの作り方

ページを移動しても選択状態を記憶するチェックボックスの作り方を紹介します。このサンプルでは、HTMLで複数のチェックボックスを作成し、JavaScriptのlocalStorageを使用してチェックのON・OFF状態をブラウザへ保存します。一度チェックした項目はページを再読み込みした場合や、別のページへ移動してから戻った場合でも保存された状態が反映されるため、利用者が同じ項目を選び直す手間を減らせます。

会員サイトの設定項目、管理画面の表示設定、検索条件や絞り込み項目、ユーザーが複数の選択肢から好みの項目を指定する画面など、選択状態を継続して利用したい場面に適しています。各チェックボックスの状態は個別に保存されるため、「HTML」と「JavaScript」だけを選択するなど、複数項目を自由に組み合わせた状態をそのまま記憶できます。

チェックボックスの項目名や数はHTMLから変更でき、CSSでは全体の横幅、余白、背景色、枠線、角丸、チェックボックスの大きさなどを調整できます。保存した状態には独自の有効期限を設定していないため、localStorageのデータが削除されるまで保持されます。レスポンシブにも対応しており、スマートフォン・タブレット・PCで利用できるチェックボックスとして導入できます。

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

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

デモ

選択状態を記憶するチェックボックス

選択した項目はブラウザへ保存されます。

HTML CSS JavaScript PHP

項目を選択したあとにページを再読み込みしても、選択したチェックボックスの状態が維持されます。

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

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

  <!-- 文字コード -->
  <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="remember-checkbox-state_wrap">

    <!-- タイトル -->
    <div class="remember-checkbox-state_title">
      選択状態を記憶するチェックボックス
    </div>

    <!-- 説明文 -->
    <p class="remember-checkbox-state_text">
      選択した項目はブラウザへ保存されます。
    </p>

    <!-- チェックボックス一覧 -->
    <div class="remember-checkbox-state_list">

      <!-- HTML -->
      <label class="remember-checkbox-state_label">
        <input
          class="remember-checkbox-state_input"
          type="checkbox"
          value="html">
        HTML
      </label>

      <!-- CSS -->
      <label class="remember-checkbox-state_label">
        <input
          class="remember-checkbox-state_input"
          type="checkbox"
          value="css">
        CSS
      </label>

      <!-- JavaScript -->
      <label class="remember-checkbox-state_label">
        <input
          class="remember-checkbox-state_input"
          type="checkbox"
          value="javascript">
        JavaScript
      </label>

      <!-- PHP -->
      <label class="remember-checkbox-state_label">
        <input
          class="remember-checkbox-state_input"
          type="checkbox"
          value="php">
        PHP
      </label>

    </div>

  </div>

  <!-- 補足説明 -->
  <p class="remember-checkbox-state_note">
    項目を選択したあとにページを再読み込みしても、選択したチェックボックスの状態が維持されます。
  </p>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

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

/* チェックボックス全体 */
.remember-checkbox-state_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を横幅へ含める */
}

/* タイトル */
.remember-checkbox-state_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃え */
}

/* 説明文 */
.remember-checkbox-state_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃え */
}

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

/* チェックボックス項目 */
.remember-checkbox-state_label{
  display:flex; /* チェックボックスと文字を横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  min-height:56px; /* 項目の最小高さ。値を大きくすると高くなる */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白 */
  border:1px solid #dfe7f0; /* 項目を囲む枠線 */
  border-radius:12px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  color:#111827; /* 項目の文字色 */
  font-size:16px; /* 項目の文字サイズ */
  font-weight:700; /* 項目の文字を太字にする */
  line-height:1.5; /* 項目の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* チェックボックス */
.remember-checkbox-state_input{
  width:22px; /* チェックボックスの横幅。値を大きくすると大きくなる */
  height:22px; /* チェックボックスの高さ。値を大きくすると大きくなる */
  margin:0 14px 0 0; /* 右側14pxの余白。値を大きくすると文字との間隔が広がる */
  accent-color:#0b6bff; /* チェック時の色 */
  flex-shrink:0; /* チェックボックスが縮まないようにする */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 補足説明 */
.remember-checkbox-state_note{
  margin:24px 0 0; /* 上側24pxの余白 */
  color:#4b5563; /* 補足説明の文字色 */
  font-size:16px; /* 補足説明の文字サイズ */
  line-height:1.8; /* 補足説明の行間 */
  text-align:center; /* 補足説明を中央揃え */
}

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

  /* スマートフォン用のチェックボックス全体 */
  .remember-checkbox-state_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* スマートフォン用のチェックボックス項目 */
  .remember-checkbox-state_label{
    padding:14px; /* 内側余白を14pxへ調整 */
  }

}

// すべてのチェックボックスを取得
const rememberCheckboxStateInputs =
  document.querySelectorAll(".remember-checkbox-state_input");

// localStorageで使用する保存名を設定
const rememberCheckboxStateStorageKey =
  "remember-checkbox-state";

// localStorageから保存済みの選択項目を取得
const rememberCheckboxStateSaved =
  JSON.parse(
    localStorage.getItem(rememberCheckboxStateStorageKey) || "[]"
  );

// 各チェックボックスへ処理を設定
rememberCheckboxStateInputs.forEach(function(input){

  // 保存されている項目ならチェック状態へ戻す
  input.checked =
    rememberCheckboxStateSaved.includes(input.value);

  // チェック状態が変更された時
  input.addEventListener("change",function(){

    // 現在チェックされている値を保存する配列
    const checkedValues = [];

    // すべてのチェックボックスを確認
    rememberCheckboxStateInputs.forEach(function(item){

      // チェックされている項目だけ追加
      if(item.checked){

        checkedValues.push(item.value);

      }

    });

    // 現在の選択状態をlocalStorageへ保存
    localStorage.setItem(
      rememberCheckboxStateStorageKey,
      JSON.stringify(checkedValues)
    );

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでチェックボックスの項目を作成し、CSSで全体のレイアウトや枠線、余白、文字サイズなどの見た目を整えます。JavaScriptではチェックボックスの選択状態を取得し、ブラウザのlocalStorageへ保存します。

チェックボックスを選択または解除するたびに現在の状態がlocalStorageへ保存されます。ページを再読み込みした場合や、同じサイト内の別ページへ移動してから戻った場合でも、保存されているデータを読み込んで以前の選択状態を復元します。保存したデータにはコード側で有効期限を設定していないため、localStorageのデータが削除されるまで状態が保持されます。

複数の項目を個別に記憶できるため、ユーザーが選択した設定や条件などをページへ戻ったあとも維持したい場合に利用できます。外部ライブラリは使用せず、HTML・CSS・バニラJavaScriptだけで動作します。

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

各ファイルの役割
index.htmlはチェックボックス全体を構成するファイルです。タイトル、説明文、HTML・CSS・JavaScript・PHPの各選択項目、補足説明を記述しています。チェックボックスのvalueは、選択状態を識別して保存・復元するための値として使用します。

style.cssはチェックボックス全体のデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、文字サイズ、チェックボックスの大きさやチェック時の色などを変更できます。640px以下の画面幅では余白を小さくするレスポンシブ設定も行っています。

script.jsはチェックボックスの選択状態を保存・復元するファイルです。ページを開いたときにlocalStorageから保存済みの値を取得し、一致するチェックボックスを選択状態へ戻します。チェック状態が変更されると、現在選択されているすべての値を配列へまとめ、JSON形式へ変換してlocalStorageへ保存します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。配置後にsample/index.htmlをブラウザで開いてください。HTML・CSS・JavaScript・PHPの中から任意の項目を選択すると、その時点のチェック状態がブラウザへ保存されます。

項目を選択したあとにページを再読み込みするか、別のページへ移動してから戻ると、保存されている値をもとにチェック状態が復元されます。選択を解除した場合も現在の状態へ更新されるため、複数項目の選択・解除をそのまま記憶できます。

このサンプルではlocalStorageへ保存するため、サーバーへ選択状態を送信する必要はありません。ただし、localStorageはブラウザ側へ保存される仕組みのため、別のブラウザや別の端末へ選択状態が共有されるものではありません。また、ブラウザ側でlocalStorageのデータが削除された場合は保存状態も失われます。

カスタマイズできる内容
index.htmlではタイトル、説明文、補足説明、チェックボックスへ表示する項目名を変更できます。項目を追加する場合は、同じ構造のチェックボックスを追加し、それぞれを識別できるvalueを設定します。

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

script.jsではremember-checkbox-stateを変更することで、localStorageへ保存するときに使用するキー名を変更できます。

数値調整
style.css

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

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

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

border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

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

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

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

padding:14px 18px;
各項目の内側余白です。上下の14pxと左右の18pxを変更すると、文字やチェックボックスと枠線との間隔が変わります。

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

width:22px;・height:22px;
チェックボックスの大きさです。値を大きくするとチェックボックスが大きく表示されます。

margin:0 14px 0 0;
チェックボックスと項目名の間隔です。14pxを大きくすると文字との間隔が広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてチェックボックス全体が縮小されます。また、画面幅640px以下ではmargin:24px auto;とpadding:24px 18px;へ変更し、各項目の内側余白もpadding:14px;へ調整しています。スマートフォン・タブレット・PCで利用できます。