複数のトグルスイッチのON・OFF状態を取得する方法【HTML/CSS/JavaScript・サンプルコード付き】
トグルスイッチ
複数のトグルスイッチのON・OFF状態を取得する方法
複数のトグルスイッチのON・OFF状態を取得する方法を紹介します。このサンプルでは、複数のトグルスイッチを自由に切り替えたあと、ボタンをクリックするだけで現在のON・OFF状態をJavaScriptでまとめて取得し、一覧として表示できます。どの設定が有効になっているかを一度に確認できるため、設定画面や確認画面などで利用しやすい構成です。
通知設定、会員サイトの各種設定、管理画面の機能選択、ECサイトの配信設定など、複数の項目をまとめて管理する画面で活用できます。各トグルは個別に切り替えられ、取得ボタンを押すとすべての状態を一覧表示するため、フォーム送信前の確認やJavaScriptによるデータ処理にも利用できます。
タイトル、説明文、各設定項目名はHTMLから変更でき、CSSではレイアウトや色、余白、角丸、スイッチサイズなどを調整できます。JavaScriptでは取得対象や表示方法を変更できるため、用途に合わせたカスタマイズも容易です。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでそのまま利用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
通知設定
各項目を切り替えたあと、ボタンを押して現在の状態を確認してください。
トグルスイッチを切り替えて「ON・OFF状態を取得」を押すと、4項目の現在の状態を一覧で確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>複数のトグルスイッチのON・OFF状態を取得する</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- トグルスイッチ全体 -->
<div class="get-toggle-switch-status_wrap">
<!-- タイトル -->
<div class="get-toggle-switch-status_title">
通知設定
</div>
<!-- 説明文 -->
<p class="get-toggle-switch-status_text">
各項目を切り替えたあと、ボタンを押して現在の状態を確認してください。
</p>
<!-- トグルスイッチ一覧 -->
<div class="get-toggle-switch-status_list">
<!-- メール通知 -->
<div class="get-toggle-switch-status_item">
<label
class="get-toggle-switch-status_name"
for="get-toggle-switch-status-email">
メール通知
</label>
<div class="get-toggle-switch-status_control">
<input
class="get-toggle-switch-status_input"
id="get-toggle-switch-status-email"
type="checkbox"
data-name="メール通知"
checked>
<label
class="get-toggle-switch-status_switch"
for="get-toggle-switch-status-email"
aria-label="メール通知を切り替える">
</label>
</div>
</div>
<!-- プッシュ通知 -->
<div class="get-toggle-switch-status_item">
<label
class="get-toggle-switch-status_name"
for="get-toggle-switch-status-push">
プッシュ通知
</label>
<div class="get-toggle-switch-status_control">
<input
class="get-toggle-switch-status_input"
id="get-toggle-switch-status-push"
type="checkbox"
data-name="プッシュ通知">
<label
class="get-toggle-switch-status_switch"
for="get-toggle-switch-status-push"
aria-label="プッシュ通知を切り替える">
</label>
</div>
</div>
<!-- 通知音 -->
<div class="get-toggle-switch-status_item">
<label
class="get-toggle-switch-status_name"
for="get-toggle-switch-status-sound">
通知音
</label>
<div class="get-toggle-switch-status_control">
<input
class="get-toggle-switch-status_input"
id="get-toggle-switch-status-sound"
type="checkbox"
data-name="通知音"
checked>
<label
class="get-toggle-switch-status_switch"
for="get-toggle-switch-status-sound"
aria-label="通知音を切り替える">
</label>
</div>
</div>
<!-- キャンペーン通知 -->
<div class="get-toggle-switch-status_item">
<label
class="get-toggle-switch-status_name"
for="get-toggle-switch-status-campaign">
キャンペーン通知
</label>
<div class="get-toggle-switch-status_control">
<input
class="get-toggle-switch-status_input"
id="get-toggle-switch-status-campaign"
type="checkbox"
data-name="キャンペーン通知">
<label
class="get-toggle-switch-status_switch"
for="get-toggle-switch-status-campaign"
aria-label="キャンペーン通知を切り替える">
</label>
</div>
</div>
</div>
<!-- 状態取得ボタン -->
<button
class="get-toggle-switch-status_button"
id="get-toggle-switch-status-button"
type="button">
ON・OFF状態を取得
</button>
<!-- 取得結果 -->
<div
class="get-toggle-switch-status_result"
aria-live="polite">
<div class="get-toggle-switch-status_result-title">
取得結果
</div>
<ul
class="get-toggle-switch-status_result-list"
id="get-toggle-switch-status-result">
<li class="get-toggle-switch-status_result-item">
ボタンを押すと現在の状態が表示されます。
</li>
</ul>
</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; /* ページ全体で使用するフォント */
}
/* トグルスイッチ全体と子要素 */
.get-toggle-switch-status_wrap,
.get-toggle-switch-status_wrap *{
box-sizing:border-box; /* paddingとborderを要素の横幅へ含める */
}
/* トグルスイッチ全体 */
.get-toggle-switch-status_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小する */
max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
padding:32px; /* 内側の余白。値を大きくすると内容と枠線の間隔が広がる */
border:1px solid #e5e7eb; /* 全体を囲む枠線 */
border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* 全体の背景色 */
}
/* タイトル */
.get-toggle-switch-status_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
text-align:center; /* タイトルを中央揃えにする */
}
/* 説明文 */
.get-toggle-switch-status_text{
margin:0 0 24px; /* 下側24pxの余白。値を大きくすると一覧との間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
text-align:center; /* 説明文を中央揃えにする */
}
/* トグルスイッチ一覧 */
.get-toggle-switch-status_list{
display:flex; /* 各項目を並べる */
flex-direction:column; /* 各項目を縦方向へ配置する */
gap:12px; /* 各項目の間隔。値を大きくすると間隔が広がる */
}
/* 各トグルスイッチ項目 */
.get-toggle-switch-status_item{
display:flex; /* 項目名とスイッチを横並びにする */
align-items:center; /* 項目名とスイッチを縦方向の中央へ揃える */
justify-content:space-between; /* 項目名を左、スイッチを右へ配置する */
gap:20px; /* 項目名とスイッチの間隔。値を大きくすると間隔が広がる */
width:100%; /* 親要素の横幅いっぱいに表示する */
min-height:64px; /* 項目の最小高さ。値を大きくすると項目が高くなる */
padding:16px 18px; /* 上下16px・左右18px。値を大きくすると項目が大きくなる */
border:1px solid #dbe3ee; /* 各項目を囲む枠線 */
border-radius:12px; /* 各項目の角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* 各項目の背景色 */
}
/* 項目名 */
.get-toggle-switch-status_name{
min-width:0; /* 画面幅が狭い場合に文字部分を縮小できるようにする */
color:#1f2937; /* 項目名の文字色 */
font-size:16px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* 項目名を太字にする */
line-height:1.5; /* 項目名の行間。値を大きくすると行間が広がる */
}
/* スイッチ操作部分 */
.get-toggle-switch-status_control{
position:relative; /* inputとスイッチの配置基準にする */
flex:0 0 52px; /* 横幅52pxを維持して縮小しない */
width:52px; /* スイッチ操作部分の横幅 */
height:28px; /* スイッチ操作部分の高さ */
}
/* 元のチェックボックス */
.get-toggle-switch-status_input{
position:absolute; /* 通常のレイアウトから外す */
width:1px; /* 視覚上見えない幅へ変更する */
height:1px; /* 視覚上見えない高さへ変更する */
margin:-1px; /* 表示領域の外側へ移動する */
padding:0; /* 内側余白を削除する */
overflow:hidden; /* はみ出した部分を非表示にする */
clip:rect(0 0 0 0); /* 古いブラウザ向けに表示領域を切り取る */
clip-path:inset(50%); /* 表示領域を切り取って非表示にする */
border:0; /* 枠線を削除する */
white-space:nowrap; /* 改行を防ぐ */
}
/* スイッチ本体 */
.get-toggle-switch-status_switch{
position:absolute; /* 操作部分の内側へ配置する */
inset:0; /* 上下左右を0にして操作部分へ合わせる */
display:block; /* 幅と高さを適用する */
width:52px; /* スイッチの横幅。値を大きくすると横に広がる */
height:28px; /* スイッチの高さ。値を大きくすると縦に広がる */
border-radius:999px; /* 両端を丸くしてカプセル型にする */
background:#cbd5e1; /* オフ時の背景色 */
cursor:pointer; /* マウスポインターを指の形にする */
transition:
background-color .3s ease,
box-shadow .3s ease;
/*
0.3秒で背景色と影を切り替える。
値を大きくすると遅くなり、小さくすると速くなる。
*/
}
/* スイッチ内の丸いボタン */
.get-toggle-switch-status_switch::before{
content:""; /* 疑似要素を表示する */
position:absolute; /* スイッチ本体の内側へ配置する */
top:3px; /* 上端から3pxの位置へ配置する */
left:3px; /* 左端から3pxの位置へ配置する */
width:22px; /* 丸いボタンの横幅。値を大きくすると大きくなる */
height:22px; /* 丸いボタンの高さ。値を大きくすると大きくなる */
border-radius:50%; /* 円形にする */
background:#ffffff; /* 丸いボタンの背景色 */
box-shadow:0 2px 6px rgba(15,23,42,.22); /* 丸いボタンの影 */
transition:transform .3s ease; /* 0.3秒で移動する。値を大きくすると遅くなる */
}
/* オン時のスイッチ本体 */
.get-toggle-switch-status_input:checked
+ .get-toggle-switch-status_switch{
background:#2563eb; /* オン時の背景色 */
}
/* オン時の丸いボタン */
.get-toggle-switch-status_input:checked
+ .get-toggle-switch-status_switch::before{
transform:translateX(24px); /* 丸いボタンを右へ24px移動する */
}
/* キーボード操作時 */
.get-toggle-switch-status_input:focus-visible
+ .get-toggle-switch-status_switch{
box-shadow:0 0 0 4px rgba(37,99,235,.18); /* フォーカス時の外側の強調範囲 */
}
/* 状態取得ボタン */
.get-toggle-switch-status_button{
display:block; /* 横幅を適用する */
width:100%; /* 親要素の横幅いっぱいに表示する */
margin:24px 0 0; /* 上側24pxの余白。値を大きくすると一覧との間隔が広がる */
padding:14px 20px; /* 上下14px・左右20px。値を大きくするとボタンが大きくなる */
border:0; /* 枠線を削除する */
border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font:inherit; /* ページ全体と同じフォントを使用する */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタンの文字を太字にする */
cursor:pointer; /* マウスポインターを指の形にする */
transition:background-color .3s ease; /* 0.3秒で背景色を切り替える */
}
/* ボタンへマウスを重ねたとき */
.get-toggle-switch-status_button:hover{
background:#1d4ed8; /* ホバー時の背景色 */
}
/* ボタンをキーボード操作したとき */
.get-toggle-switch-status_button:focus-visible{
outline:3px solid rgba(37,99,235,.25); /* フォーカス枠の太さ */
outline-offset:3px; /* ボタンとフォーカス枠の間隔 */
}
/* 取得結果全体 */
.get-toggle-switch-status_result{
margin-top:20px; /* 上側20pxの余白。値を大きくするとボタンとの間隔が広がる */
padding:16px 18px; /* 上下16px・左右18px。値を大きくすると余白が広がる */
border:1px solid #dbe3ee; /* 取得結果を囲む枠線 */
border-radius:10px; /* 取得結果の角丸 */
background:#ffffff; /* 取得結果の背景色 */
}
/* 取得結果タイトル */
.get-toggle-switch-status_result-title{
margin:0 0 10px; /* 下側10pxの余白。値を大きくすると一覧との間隔が広がる */
font-size:16px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
}
/* 取得結果一覧 */
.get-toggle-switch-status_result-list{
display:flex; /* 各結果を並べる */
flex-direction:column; /* 縦方向へ配置する */
gap:8px; /* 各結果の間隔。値を大きくすると間隔が広がる */
margin:0; /* ブラウザ標準の外側余白を削除する */
padding:0; /* ブラウザ標準の内側余白を削除する */
list-style:none; /* 箇条書き記号を非表示にする */
}
/* 各取得結果 */
.get-toggle-switch-status_result-item{
display:flex; /* 項目名と状態を横並びにする */
align-items:center; /* 縦方向の中央へ揃える */
justify-content:space-between; /* 項目名を左、状態を右へ配置する */
gap:16px; /* 項目名と状態の間隔 */
color:#374151; /* 取得結果の文字色 */
line-height:1.6; /* 取得結果の行間 */
}
/* ON・OFF表示 */
.get-toggle-switch-status_status{
flex:0 0 auto; /* 状態表示が縮まないようにする */
min-width:46px; /* 状態表示の最小横幅 */
padding:3px 8px; /* 上下3px・左右8pxの内側余白 */
border-radius:999px; /* 両端を丸くする */
background:#eef2f7; /* OFF時の背景色 */
color:#4b5563; /* OFF時の文字色 */
font-size:13px; /* 状態表示の文字サイズ */
font-weight:700; /* 状態表示を太字にする */
text-align:center; /* 文字を中央揃えにする */
}
/* ON状態 */
.get-toggle-switch-status_status.is-on{
background:#dbeafe; /* ON時の背景色 */
color:#1d4ed8; /* ON時の文字色 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* トグルスイッチ全体 */
.get-toggle-switch-status_wrap{
padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
}
/* 各トグルスイッチ項目 */
.get-toggle-switch-status_item{
gap:14px; /* スマートフォンでは項目名とスイッチの間隔を小さくする */
padding:14px 16px; /* スマートフォンでは内側余白を小さくする */
}
}
// 状態取得ボタンを取得
const getToggleSwitchStatusButton =
document.getElementById("get-toggle-switch-status-button");
// 取得結果の表示先を取得
const getToggleSwitchStatusResult =
document.getElementById("get-toggle-switch-status-result");
// 状態取得ボタンをクリックしたときの処理
getToggleSwitchStatusButton.addEventListener("click", () => {
// すべてのトグルスイッチを取得
const getToggleSwitchStatusInputs =
document.querySelectorAll(".get-toggle-switch-status_input");
// 前回表示した取得結果を削除
getToggleSwitchStatusResult.innerHTML = "";
// 各トグルスイッチの状態を順番に取得
getToggleSwitchStatusInputs.forEach((input) => {
// 取得結果1件分の要素を作成
const resultItem = document.createElement("li");
// 項目名を表示する要素を作成
const resultName = document.createElement("span");
// ON・OFF状態を表示する要素を作成
const resultStatus = document.createElement("span");
// 取得結果1件分のクラス名を設定
resultItem.className =
"get-toggle-switch-status_result-item";
// data-name属性から項目名を取得
resultName.textContent = input.dataset.name;
// ON・OFF表示用のクラス名を設定
resultStatus.className =
"get-toggle-switch-status_status";
// checkedの状態に応じてONまたはOFFを表示
resultStatus.textContent =
input.checked ? "ON" : "OFF";
// ONの場合は強調表示用のクラスを追加
if(input.checked){
resultStatus.classList.add("is-on");
}
// 項目名と状態を取得結果へ追加
resultItem.appendChild(resultName);
resultItem.appendChild(resultStatus);
// 完成した取得結果を一覧へ追加
getToggleSwitchStatusResult.appendChild(resultItem);
});
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは複数のトグルスイッチと結果表示エリアを配置し、CSSでは一覧レイアウトやスイッチのデザインを設定しています。JavaScriptではボタンをクリックしたタイミングで各トグルスイッチのON・OFF状態を取得し、一覧形式で表示します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはトグルスイッチ一覧、状態取得ボタン、取得結果表示エリアを配置するファイルです。項目名や初期状態、表示する件数を変更できます。
style.cssは全体レイアウト、カードデザイン、トグルスイッチ、取得結果一覧のデザインを設定するファイルです。色、余白、角丸、サイズ、文字の大きさなどを変更できます。
script.jsは「ON・OFF状態を取得」ボタンが押されたときに、すべてのトグルスイッチの状態を取得して結果一覧へ表示する処理を担当します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。各トグルスイッチを自由に切り替え、「ON・OFF状態を取得」ボタンをクリックすると、現在の設定内容が一覧で表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、トグルスイッチの項目名、初期ON・OFF状態、表示件数を変更できます。用途に合わせて通知設定、権限設定、機能設定などさまざまな画面へ利用できます。
style.cssでは全体の横幅、背景色、余白、枠線、角丸、スイッチのサイズ、ON・OFF時の色、ボタンデザイン、取得結果一覧の表示を変更できます。
script.jsでは取得対象となるトグルスイッチや取得結果の表示方法を変更できます。表示順や取得後の処理も用途に合わせてカスタマイズできます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
gap:12px;
各トグルスイッチの間隔です。値を大きくすると項目同士の間隔が広がります。
min-height:64px;
各項目の高さです。値を大きくするとクリックしやすくなり、小さくするとコンパクトになります。
width:52px;
スイッチ本体の横幅です。値を変更するとスイッチ全体のサイズが変わります。
height:28px;
スイッチ本体の高さです。値を変更すると縦方向のサイズが変わります。
width:22px;
丸いボタンのサイズです。値を大きくするとボタンが大きく表示されます。
transform:translateX(24px);
ON時に丸いボタンが移動する距離です。スイッチの横幅に合わせて調整できます。
transition:0.3s;
スイッチやボタンが切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に合わせて全体サイズが自動調整されます。また、640px以下では内側余白や項目間隔を小さくするメディアクエリを使用しているため、スマートフォン・タブレット・PCでも快適に利用できます。
複数のトグルスイッチのON・OFF状態を取得する方法【HTML/CSS/JavaScript・サンプルコード付き】
コメント