チェック状態を保存するチェックボックスを作る方法
チェック状態を保存するチェックボックスを作る方法を紹介します。チェックした内容をブラウザへ保存し、ページを再読み込みしても前回の選択状態を自動で復元できるサンプルです。設定画面やアンケート、タスク管理など、一度選択した内容を保持したい場面で便利に利用できます。
HTMLでチェックボックスを配置し、CSSで見やすいデザインを整え、JavaScriptのlocalStorageを利用してチェック状態を保存・復元します。特別なライブラリは不要で、ブラウザだけで動作するため、そのまま他のフォームにも応用できます。
チェック項目や表示内容は自由に変更できます。ページを閉じたり更新した後も選択内容が維持されるため、ユーザーの入力し直しを防ぎ、使いやすいフォームを簡単に作成できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
カスタマイズについて
チェック項目や保存キーは用途に合わせて自由に変更できます。
デモ
チェックを変更した後にページを再読み込みすると、前回のチェック状態が復元される動作を確認できます。
コードをコピーして使おう！
<!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-save-state_wrap">
<!-- チェックボックスエリアのタイトル -->
<div class="checkbox-save-state_title">
チェック状態を保存
</div>
<!-- 保存機能を案内する説明文 -->
<p class="checkbox-save-state_text">
チェックした内容はページを更新しても保持されます。
</p>
<!-- 保存対象となるチェックボックス一覧 -->
<div class="checkbox-save-state_list">
<!-- HTMLのチェックボックス項目 -->
<label class="checkbox-save-state_label">
<!-- HTMLの選択状態を保存するチェックボックス -->
<input
class="checkbox-save-state_input"
type="checkbox"
name="interest[]"
value="HTML">
<!-- HTMLの項目名 -->
<span class="checkbox-save-state_name">
HTML
</span>
</label>
<!-- CSSのチェックボックス項目 -->
<label class="checkbox-save-state_label">
<!-- CSSの選択状態を保存するチェックボックス -->
<input
class="checkbox-save-state_input"
type="checkbox"
name="interest[]"
value="CSS">
<!-- CSSの項目名 -->
<span class="checkbox-save-state_name">
CSS
</span>
</label>
<!-- JavaScriptのチェックボックス項目 -->
<label class="checkbox-save-state_label">
<!-- JavaScriptの選択状態を保存するチェックボックス -->
<input
class="checkbox-save-state_input"
type="checkbox"
name="interest[]"
value="JavaScript">
<!-- JavaScriptの項目名 -->
<span class="checkbox-save-state_name">
JavaScript
</span>
</label>
<!-- PHPのチェックボックス項目 -->
<label class="checkbox-save-state_label">
<!-- PHPの選択状態を保存するチェックボックス -->
<input
class="checkbox-save-state_input"
type="checkbox"
name="interest[]"
value="PHP">
<!-- PHPの項目名 -->
<span class="checkbox-save-state_name">
PHP
</span>
</label>
</div>
<!-- 保存状態の確認方法を案内する文章 -->
<p class="checkbox-save-state_note">
チェックを変更した後にページを再読み込みすると、選択状態が復元されます。
</p>
</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-save-state_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小 */
max-width:640px; /* 全体の最大横幅。値を大きくすると表示領域が広がる */
margin:40px auto; /* 上下40pxの余白を付け、左右を中央配置 */
padding:32px; /* 全体の内側余白。値を大きくすると内容との間隔が広がる */
border:1px solid #dfe7f0; /* 全体を囲む枠線の太さ・種類・色 */
border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* チェックボックス全体の背景色 */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
}
/* タイトル */
.checkbox-save-state_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
text-align:center; /* タイトルを中央揃えにする */
}
/* 説明文 */
.checkbox-save-state_text{
margin:0 0 24px; /* 下側24pxの余白。値を大きくすると一覧との間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
text-align:center; /* 説明文を中央揃えにする */
}
/* チェックボックス一覧 */
.checkbox-save-state_list{
display:grid; /* 各チェックボックスをグリッドで配置 */
gap:14px; /* 項目同士の間隔。値を大きくすると縦方向の余白が広がる */
}
/* 各チェックボックス項目 */
.checkbox-save-state_label{
display:flex; /* チェックボックスと項目名を横並びにする */
align-items:center; /* チェックボックスと文字を縦方向の中央へ揃える */
width:100%; /* 親要素の横幅いっぱいに表示 */
min-height:56px; /* 項目の最小高さ。値を大きくするとタップ領域が高くなる */
padding:14px 16px; /* 上下14px・左右16pxの内側余白。値を大きくすると項目が広くなる */
border:1px solid #dfe7f0; /* 項目を囲む枠線の太さ・種類・色 */
border-radius:10px; /* 項目の角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* 項目の背景色 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
box-sizing:border-box; /* paddingとborderを横幅と高さへ含める */
}
/* チェックボックス本体 */
.checkbox-save-state_input{
width:20px; /* チェックボックスの横幅。値を大きくすると横方向へ大きくなる */
height:20px; /* チェックボックスの高さ。値を大きくすると縦方向へ大きくなる */
margin:0 12px 0 0; /* 右側12pxの余白。値を大きくすると項目名との間隔が広がる */
accent-color:#0b6bff; /* チェック時に表示する色 */
flex-shrink:0; /* 横幅が狭くてもチェックボックスを縮めない */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 各項目の名前 */
.checkbox-save-state_name{
color:#111827; /* 項目名の文字色 */
font-size:16px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* 項目名を太字にする */
line-height:1.5; /* 項目名の行間。値を大きくすると行間が広がる */
}
/* 保存状態の確認方法を案内する文章 */
.checkbox-save-state_note{
margin:20px 0 0; /* 上側20pxの余白。値を大きくすると一覧との間隔が広がる */
color:#2563eb; /* 案内文の文字色 */
font-size:14px; /* 案内文の文字サイズ。値を大きくすると文字が大きくなる */
line-height:1.8; /* 案内文の行間。値を大きくすると行間が広がる */
text-align:center; /* 案内文を中央揃えにする */
}
/* 画面幅640px以下 */
@media screen and (max-width:640px){
/* スマートフォン表示時のページ全体 */
body{
padding:24px 12px; /* 上下24px・左右12pxへ縮小して画面を広く使う */
}
/* スマートフォン表示時の全体エリア */
.checkbox-save-state_wrap{
margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
padding:24px 18px; /* 上下24px・左右18pxへ縮小して画面内へ収める */
}
/* スマートフォン表示時の各項目 */
.checkbox-save-state_label{
padding:14px; /* 内側余白を14pxへ縮小して表示領域を確保 */
}
}
// ======================================================
// チェック状態を保存するチェックボックスをすべて取得
// ======================================================
const checkboxSaveStateInputs = document.querySelectorAll(
'.checkbox-save-state_input'
);
// ======================================================
// localStorageで使用する保存キー
// ======================================================
const checkboxSaveStateKey = 'checkbox-save-state';
// ======================================================
// localStorageから保存済みデータを取得する関数
// ======================================================
function getSavedCheckboxValues(){
// 保存済みの文字列データを取得
const savedData = localStorage.getItem(checkboxSaveStateKey);
// 保存データが存在しない場合は空の配列を返す
if (!savedData) {
return [];
}
try {
// JSON文字列を配列へ変換して返す
return JSON.parse(savedData);
} catch (error) {
// 不正な保存データの場合は空の配列を返す
return [];
}
}
// ======================================================
// 現在のチェック状態をlocalStorageへ保存する関数
// ======================================================
function saveCheckboxState(){
// チェックされている項目だけを配列へまとめる
const checkedValues = [...checkboxSaveStateInputs]
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.value);
// 配列をJSON文字列へ変換してlocalStorageへ保存
localStorage.setItem(
checkboxSaveStateKey,
JSON.stringify(checkedValues)
);
}
// ======================================================
// 保存済みのチェック状態を画面へ復元する関数
// ======================================================
function restoreCheckboxState(){
// 保存済みの項目名を取得
const savedValues = getSavedCheckboxValues();
// 各チェックボックスへ保存状態を反映
checkboxSaveStateInputs.forEach((checkbox) => {
checkbox.checked = savedValues.includes(checkbox.value);
});
}
// ======================================================
// 各チェックボックスへ変更イベントを設定
// ======================================================
checkboxSaveStateInputs.forEach((checkbox) => {
// チェック状態が変わるたびに現在の状態を保存
checkbox.addEventListener('change', saveCheckboxState);
});
// ======================================================
// ページ読み込み時に保存済みの状態を復元
// ======================================================
restoreCheckboxState();
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでチェックボックスを配置し、CSSでデザインを整え、JavaScriptでチェック状態を保存・復元します。ページを再読み込みしても選択状態が保持されるため、設定画面やアンケートなどにも応用できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html：チェックボックスや説明文を配置します。項目名やチェックボックスの数を自由に変更できます。
style.css：レイアウトや色、余白、文字サイズなどデザインを設定します。
script.js：チェック状態をlocalStorageへ保存し、ページ読み込み時に前回の状態を復元します。
設置方法・使い方
sampleフォルダ内へ3ファイルを配置し、index.htmlをブラウザで開くだけで利用できます。チェック状態はブラウザのlocalStorageへ自動保存されるため、ページを更新しても前回の選択内容が復元されます。
カスタマイズできる内容
index.htmlではチェックボックスの項目名や件数を変更できます。style.cssでは色・余白・文字サイズ・角丸・横幅などを自由に調整できます。script.jsでは保存キーを変更できるため、別ページや別フォームと保存内容を分けて管理できます。
数値調整
style.css
max-width:640px; …… 640pxは全体の最大横幅です。値を大きくすると横幅が広がります。
padding:32px; …… 32pxは内側の余白です。値を大きくすると余白が広くなります。
gap:14px; …… 14pxは各チェックボックスの間隔です。値を大きくすると項目同士の間隔が広がります。
font-size:22px; …… 22pxはタイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
font-size:16px; …… 16pxは本文や項目名の文字サイズです。値を変更すると文字の大きさが変わります。
border-radius:18px; …… 18pxは全体の角丸です。値を大きくすると丸みが強くなります。
width:20px; height:20px; …… 20pxはチェックボックスの大きさです。値を変更するとサイズが変わります。
レスポンシブ対応
style.cssのmedia queryでレスポンシブ対応しています。画面幅640px以下ではpaddingや余白を調整し、スマートフォン・タブレット・PCでもレイアウトが崩れず快適に利用できます。
“`
コメント