チェックした件数を表示するチェックボックスを作る方法
チェックした件数をリアルタイムで表示するチェックボックスの作り方を紹介します。ユーザーがチェックボックスを選択・解除すると、現在選択されている件数が自動で更新されるシンプルなサンプルです。
アンケートフォームや設定画面、商品選択、タスク管理など、複数項目の選択状況を分かりやすく表示したい場面で利用できます。JavaScriptでチェック状態を監視するだけなので、軽量で扱いやすい実装です。
HTML・CSS・JavaScriptのみで動作し、特別なライブラリは必要ありません。項目の追加や削除にも対応しやすく、選択件数を表示するフォームのベースとしてそのまま利用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
サンプルは自由にカスタマイズできます。ご利用の環境に合わせて調整してください。
デモ
チェックボックスを選択・解除すると、現在選択されている件数がリアルタイムで更新されます。
コードをコピーして使おう！
<!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="checkbox-count_wrap">
<!-- タイトル -->
<div class="checkbox-count_title">
チェックした件数
</div>
<!-- 説明文 -->
<p class="checkbox-count_text">
項目を選択すると選択件数が自動で更新されます。
</p>
<!-- 選択件数表示エリア -->
<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{
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-count_title{
margin:0 0 10px; /* 下側10pxの余白。値を大きくすると説明文との間隔が広がる */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
text-align:center; /* タイトルを中央揃えにする */
}
/* 説明文 */
.checkbox-count_text{
margin:0 0 26px; /* 下側26pxの余白。値を大きくすると件数表示との間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
text-align:center; /* 説明文を中央揃えにする */
}
/* 選択件数の表示エリア */
.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; /* チェックボックスと文字を縦方向の中央へ揃える */
width:100%; /* 親要素の横幅いっぱいに表示 */
min-height:58px; /* 項目の最小高さ。値を大きくするとタップ領域が高くなる */
padding:14px 18px; /* 上下14px・左右18pxの内側余白。値を大きくすると項目が広くなる */
border:1px solid #dfe7f0; /* 項目を囲む枠線の太さ・種類・色 */
border-radius:12px; /* 項目の角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* 項目の背景色 */
color:#111827; /* 項目内の基本文字色 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
box-sizing:border-box; /* paddingとborderを横幅と高さへ含める */
}
/* チェックボックス本体 */
.checkbox-count_input{
width:22px; /* チェックボックスの横幅。値を大きくすると横方向へ大きくなる */
height:22px; /* チェックボックスの高さ。値を大きくすると縦方向へ大きくなる */
margin:0 14px 0 0; /* 右側14pxの余白。値を大きくすると項目名との間隔が広がる */
accent-color:#0b6bff; /* チェック時に表示する色 */
flex-shrink:0; /* 横幅が狭くてもチェックボックスを縮めない */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 各項目の名前 */
.checkbox-count_name{
color:#111827; /* 項目名の文字色 */
font-size:16px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* 項目名を太字にする */
line-height:1.5; /* 項目名の行間。値を大きくすると行間が広がる */
}
/* 画面幅640px以下 */
@media screen and (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(function(checkbox){
// チェック状態が変わるたびに選択件数を更新
checkbox.addEventListener('change', updateCheckboxCount);
});
// ======================================================
// ページ読み込み時の選択件数を表示
// ======================================================
updateCheckboxCount();
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。チェックボックスを選択すると、現在チェックされている件数をリアルタイムで表示できます。JavaScriptは件数を数えて表示する処理のみを担当しているため、シンプルで理解しやすい構成です。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
チェックボックス一覧と選択件数を表示する画面を作成します。項目名やチェックボックスの数を編集できます。
style.css
レイアウトや文字サイズ、色、余白、角丸など見た目全体を設定します。
script.js
チェックボックスの選択状態を監視し、現在選択されている件数を自動で更新します。
設置方法・使い方
sampleフォルダ内の3ファイルを同じ場所へ配置してください。
そのまま sample/index.html をブラウザで開くと利用できます。
チェックボックスをオン・オフすると、選択件数がリアルタイムで更新されます。
カスタマイズできる内容
index.html を編集すると、チェックボックスの項目名や表示数を変更できます。
style.css を編集すると、文字色・背景色・余白・角丸・枠線・チェックボックスのサイズなどを変更できます。
script.js を編集すると、件数表示の文言や表示形式を変更できます。
数値調整
style.css
max-width:700px;
→ 700pxは全体の最大横幅です。値を大きくすると横幅が広くなります。
padding:32px;
→ 32pxは内側の余白です。値を大きくすると余白が広くなります。
gap:14px;
→ 14pxは各チェックボックスの間隔です。値を変更すると項目同士の間隔が変わります。
font-size:22px;
→ 22pxはタイトルの文字サイズです。値を変更すると文字の大きさが変わります。
border-radius:18px;
→ 18pxは全体の角丸です。値を大きくすると丸みが強くなります。
width:22px;
height:22px;
→ 22pxはチェックボックスの大きさです。値を変更するとサイズが変わります。
レスポンシブ対応
style.css のメディアクエリでスマートフォン表示へ対応しています。
max-width・padding・width:100% を利用して画面幅に合わせて自動調整されるため、PC・タブレット・スマートフォンでも見やすく表示できます。
コメント