ON・OFF状態を取得するトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

トグルスイッチ

ON・OFF状態を取得するトグルスイッチを作る方法

ON・OFF状態を取得するトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLとCSSで作成したトグルスイッチの現在の状態を、JavaScriptで取得する方法を実装しています。取得ボタンをクリックすると、スイッチがONなのかOFFなのかを判定し、その結果を画面へ表示できます。

トグルスイッチの状態取得は、お問い合わせ画面の同意確認、会員サイトの通知設定、管理画面の公開・非公開設定、ECサイトのオプション選択など、現在の設定内容を送信前に取得したい場面で利用できます。チェック状態を取得する基本的な実装方法を理解しておくことで、フォーム送信やAPI連携などさまざまな機能へ応用できます。

タイトルや説明文、ラベル、ボタンの文字はHTMLから変更でき、CSSでは色やサイズ、余白、角丸などを自由に調整できます。JavaScriptでは取得後の表示内容も変更できるため、用途に合わせてカスタマイズしやすく、スマートフォン・タブレット・PCで利用できる基本的なトグルスイッチのサンプルとして活用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

通知設定

ボタンを押すと現在のON・OFF状態を取得します。

メール通知

トグルスイッチを切り替えたあと、「状態を取得」ボタンを押すと現在のON・OFF状態を取得できます。

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

<!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="toggle-switch-get-state_wrap">

    <!-- タイトル -->
    <div class="toggle-switch-get-state_title">
      通知設定
    </div>

    <!-- 説明文 -->
    <p class="toggle-switch-get-state_text">
      ボタンを押すと現在のON・OFF状態を取得します。
    </p>

    <!-- 設定項目 -->
    <div class="toggle-switch-get-state_row">

      <!-- 項目名 -->
      <span class="toggle-switch-get-state_label-text">
        メール通知
      </span>

      <!-- トグルスイッチ -->
      <label class="toggle-switch-get-state_switch">

        <!-- ON・OFF状態を管理するチェックボックス -->
        <input
          id="notification-toggle"
          class="toggle-switch-get-state_checkbox"
          type="checkbox"
          aria-label="メール通知を切り替える">

        <!-- スイッチの背景と丸いノブ -->
        <span class="toggle-switch-get-state_slider"></span>

      </label>

    </div>

    <!-- 現在の状態を取得するボタン -->
    <button
      id="get-toggle-state"
      class="toggle-switch-get-state_button"
      type="button">
      状態を取得
    </button>

    <!-- 取得した状態を表示するエリア -->
    <p
      id="toggle-state-result"
      class="toggle-switch-get-state_result"
      aria-live="polite"></p>

  </div>

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトグルスイッチと状態取得ボタン、結果表示エリアを配置し、CSSでスイッチやボタンのデザインを設定します。JavaScriptではボタンをクリックしたタイミングでトグルスイッチのON・OFF状態を取得し、その結果を画面へ表示します。 

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

各ファイルの役割
index.htmlは画面全体を構成するファイルです。タイトル、説明文、項目名、ボタンの文字、結果表示エリアを編集できます。トグルスイッチの初期状態もHTMLから設定できます。

style.cssはトグルスイッチ、ボタン、結果表示のデザインを設定するファイルです。横幅、余白、背景色、文字サイズ、角丸、影、配色などを変更できます。

script.jsはトグルスイッチの状態を取得する処理を記述したファイルです。ボタンを押したときに現在のON・OFF状態を判定し、画面へ表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。トグルスイッチを切り替えて「状態を取得」ボタンを押すと、現在のON・OFF状態を取得して画面へ表示できます。

カスタマイズできる内容
index.htmlではタイトル、説明文、項目名、ボタンの文字、結果表示の内容を変更できます。トグルスイッチを初期状態でONにしたい場合は、チェックボックスへchecked属性を追加するだけで変更できます。

style.cssでは全体の横幅、余白、背景色、ボタンの色、スイッチのサイズ、角丸、文字サイズ、フォーカス時の強調表示などを変更できます。

script.jsでは取得後に表示するメッセージや、ON・OFFの判定後に実行する処理を変更できます。取得した状態を送信処理や保存処理へ利用することもできます。

数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

width:62px;
トグルスイッチの横幅です。値を大きくするとスイッチ全体が横長になります。

height:34px;
トグルスイッチの高さです。値を大きくするとスイッチが高くなります。

width:26px;
ノブのサイズです。値を大きくすると丸いノブが大きく表示されます。

transform:translateX(28px);
ON時にノブが移動する距離です。値を変更すると移動量が変わります。

transition:0.3s;
スイッチやボタンの切り替え時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせてレイアウトが調整されます。また、640px以下では余白を縮小し、ボタンを横幅いっぱいへ表示するため、スマートフォン・タブレット・PCで快適に利用できます。

こちらもおすすめ

トグルスイッチ
トグルスイッチのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント