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

ページを移動しても選択状態を記憶するラジオボタンの作り方

ページを移動しても選択状態を記憶するラジオボタンの作り方を紹介します。このサンプルでは、複数の選択肢から1つを選べるラジオボタンをHTMLで作成し、選択された項目をJavaScriptでブラウザのlocalStorageへ保存します。ページを再読み込みした場合や別のページへ移動して戻った場合でも、保存されている値を読み込むことで最後に選択した項目を復元できます。

会員サイトの設定画面、ECサイトの商品条件や表示設定、管理画面の各種設定など、一度選択した内容を次のページでも維持したい場面に利用できます。利用者がページを移動するたびに同じ項目を選び直す必要がなく、前回の選択状態をそのまま引き継げます。サーバーへデータを送信する処理は使用せず、ブラウザ内へ選択状態を保存するシンプルな構成です。

選択肢の名前や表示内容はHTMLから変更でき、CSSではラジオボタンを囲むエリアの横幅、余白、背景色、枠線、角丸などを調整できます。JavaScriptではラジオボタンの変更を検知して選択値を保存し、ページを開いたときに保存済みの値と一致する項目を選択状態へ戻します。スマートフォン・タブレット・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-radio-button-state_wrap">

    <!-- タイトル -->
    <div class="remember-radio-button-state_title">
      好きな言語を選択
    </div>

    <!-- 説明文 -->
    <p class="remember-radio-button-state_text">
      選択した項目をブラウザへ保存し、ページを移動しても選択状態を復元します。
    </p>

    <!-- HTML -->
    <label class="remember-radio-button-state_label">
      <input
        class="remember-radio-button-state_input"
        type="radio"
        name="remember-language"
        value="html"
        checked>
      <span class="remember-radio-button-state_name">
        HTML
      </span>
    </label>

    <!-- CSS -->
    <label class="remember-radio-button-state_label">
      <input
        class="remember-radio-button-state_input"
        type="radio"
        name="remember-language"
        value="css">
      <span class="remember-radio-button-state_name">
        CSS
      </span>
    </label>

    <!-- JavaScript -->
    <label class="remember-radio-button-state_label">
      <input
        class="remember-radio-button-state_input"
        type="radio"
        name="remember-language"
        value="javascript">
      <span class="remember-radio-button-state_name">
        JavaScript
      </span>
    </label>

    <!-- PHP -->
    <label class="remember-radio-button-state_label">
      <input
        class="remember-radio-button-state_input"
        type="radio"
        name="remember-language"
        value="php">
      <span class="remember-radio-button-state_name">
        PHP
      </span>
    </label>

  </div>

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

</body>
</html>

/* すべての要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingと枠線を要素サイズへ含める */
}

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ラジオボタン全体 */
.remember-radio-button-state_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:640px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #dfe7f0; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸 */
  background:#f8fafc; /* 全体の背景色 */
}

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

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

/* ラジオボタンの項目 */
.remember-radio-button-state_label{
  display:flex; /* ラジオボタンと文字を横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  gap:12px; /* ラジオボタンと文字の間隔 */
  padding:14px 16px; /* 上下14px・左右16pxの内側余白 */
  margin-bottom:14px; /* 各項目の下側余白 */
  border:1px solid #dfe7f0; /* 項目を囲む枠線 */
  border-radius:10px; /* 項目の角丸 */
  background:#ffffff; /* 項目の背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* ラジオボタン */
.remember-radio-button-state_input{
  width:20px; /* ラジオボタンの横幅 */
  height:20px; /* ラジオボタンの高さ */
  accent-color:#0b6bff; /* 選択時の色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 項目名 */
.remember-radio-button-state_name{
  font-size:16px; /* 項目名の文字サイズ */
  font-weight:700; /* 項目名を太字にする */
  color:#111827; /* 項目名の文字色 */
}

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

  /* ページ全体 */
  body{
    padding:24px 16px; /* 上下24px・左右16pxへ縮小 */
  }

  /* ラジオボタン全体 */
  .remember-radio-button-state_wrap{
    padding:20px; /* 内側余白を20pxへ縮小 */
  }

}

// localStorageで使用する保存名
const rememberRadioButtonStateKey =
  "rememberRadioButtonState";

// すべてのラジオボタンを取得
const rememberRadioButtonStateInputs =
  document.querySelectorAll(
    ".remember-radio-button-state_input"
  );

// localStorageから保存済みの選択状態を取得
const savedRadioButtonState =
  localStorage.getItem(
    rememberRadioButtonStateKey
  );

// 保存済みの値がある場合
if(savedRadioButtonState){

  // すべてのラジオボタンを確認
  rememberRadioButtonStateInputs.forEach(function(input){

    // 保存されている値と一致する場合
    if(input.value === savedRadioButtonState){

      // 選択状態へ復元
      input.checked = true;

    }

  });

}

// すべてのラジオボタンへ変更イベントを設定
rememberRadioButtonStateInputs.forEach(function(input){

  // 選択状態が変更された時
  input.addEventListener("change",function(){

    // 選択された値をlocalStorageへ保存
    localStorage.setItem(
      rememberRadioButtonStateKey,
      input.value
    );

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは4つのラジオボタンを作成し、CSSで各選択肢の横幅、余白、背景色、枠線、角丸、ラジオボタンの大きさなどを整えます。JavaScriptでは選択された項目のvalueをlocalStorageへ保存し、ページを再読み込みした場合や別のページへ移動して戻った場合に、最後に選択した項目を復元します。

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

各ファイルの役割
index.htmlはラジオボタン全体を構成するファイルです。「好きな言語を選択」のタイトル、説明文、HTML・CSS・JavaScript・PHPの選択肢を変更できます。各input要素のvalueは、JavaScriptで選択状態を識別して保存・復元するために使用します。

style.cssはラジオボタン全体と各選択肢のデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、選択肢同士の間隔、ラジオボタンの大きさ、選択時の色などを変更できます。

script.jsはラジオボタンの選択状態を保存・復元するファイルです。ページ読み込み時にlocalStorageから保存済みの値を取得し、保存値とinput要素のvalueが一致したラジオボタンを選択状態へ戻します。別の項目を選択すると、その値がlocalStorageへ保存されます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3ファイルを保存したあと、sample/index.htmlをブラウザで開いてください。HTML・CSS・JavaScript・PHPの中から1つをクリックすると、その項目が選択状態になります。

選択すると、その項目のvalueがlocalStorageへ保存されます。ページを再読み込みした場合や別のページへ移動してから戻った場合も、保存済みの値を読み込んで最後に選択したラジオボタンが自動的に選択状態へ戻ります。

カスタマイズできる内容
index.htmlではタイトル、説明文、ラジオボタンの項目名、選択肢の数を変更できます。選択肢を追加する場合は、既存と同じ構造でlabel要素とinput要素を追加し、ほかの項目と重複しないvalueを設定します。

style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、項目同士の間隔、ラジオボタンの大きさ、選択時の色、文字サイズなどを変更できます。

script.jsではrememberRadioButtonStateをlocalStorageの保存名として使用しています。この文字列を変更すると、選択状態を保存するときのキー名を変更できます。

数値調整
style.css

padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白です。値を大きくすると画面端との間隔が広がります。

max-width:640px;
ラジオボタン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
ラジオボタン全体の上下余白です。40pxを大きくすると上下の間隔が広がります。

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

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

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

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると説明文と最初の選択肢との間隔が広がります。

gap:12px;
ラジオボタンと項目名の間隔です。値を大きくすると両者の間隔が広がります。

padding:14px 16px;
各選択肢の内側余白です。14pxは上下、16pxは左右の余白です。値を大きくすると各項目が大きくなります。

margin-bottom:14px;
各選択肢の下側余白です。値を大きくすると選択肢同士の間隔が広がります。

border-radius:10px;
各選択肢の角丸です。値を大きくすると丸みが強くなります。

width:20px;・height:20px;
ラジオボタンの大きさです。値を大きくするとラジオボタンも大きく表示されます。

font-size:16px;
項目名の文字サイズです。値を大きくすると文字が大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではラジオボタン全体へwidth:100%とmax-width:640pxを指定しているため、画面幅に合わせて縮小されます。

また、画面幅640px以下ではページ全体の余白を24px 16px、ラジオボタン全体の内側余白を20pxへ変更しています。スマートフォン・タブレット・PCで利用できます。