ラジオボタンをマスター！7つの使い方＆カスタマイズ例

JavaScriptを用いたラジオボタンの使い方とカスタマイズ例JS
2023.04.22
この記事は約9分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

ラジオボタンは、Webページ上で選択肢から一つだけ選択できる入力要素です。

この記事では、JavaScriptでラジオボタンを操作する方法を、初心者にも分かりやすく説明しています。

使い方や注意点、カスタマイズ方法とサンプルコード、応用例まで網羅しているので、これを読めばラジオボタンの扱いに自信が持てるでしょう。

●ラジオボタンとは

○基本的な概念

ラジオボタンは、ウェブページ上で複数の選択肢から一つだけ選択できる入力要素です。

ユーザーが複数の選択肢の中から一つを選ぶ際に使用され、一般的にはフォーム内で利用されます。

ラジオボタンは、名前が同じグループに属しており、グループ内で一つだけ選択可能です。

●HTMLでのラジオボタンの記述方法

ラジオボタンは、HTMLのinputタグを使って記述します。

type属性に”radio”を指定することで、ラジオボタンになります。

また、同じグループに属するラジオボタンは、同じname属性を持ちます。

○サンプルコード1：HTMLでのラジオボタンの記述

<form>
  <input type="radio" name="gender" value="male" checked> 男性
  <input type="radio" name="gender" value="female"> 女性
</form>

上記のサンプルコードでは、性別を選択するラジオボタンが作成されます。

name属性が”gender”のため、これらのラジオボタンは同じグループに属し、一つだけ選択できます。

また、初期状態で男性が選択されているように、”checked”属性が付与されています。

●JavaScriptでラジオボタンの使い方

JavaScriptを使用して、ラジオボタンの選択状態を取得したり、選択状態を変更したり、選択イベントを処理することができます。

○サンプルコード2：ラジオボタンの選択状態を取得

// ラジオボタンの選択状態を取得
function getSelectedValue() {
  const radioButtons = document.getElementsByName("gender");
  let selectedValue;

  radioButtons.forEach((button) => {
    if (button.checked) {
      selectedValue = button.value;
    }
  });

  return selectedValue;
}

上記のサンプルコードでは、getSelectedValue関数を用いて、選択されているラジオボタンの値を取得できます。

name属性が”gender”のラジオボタンを取得し、選択されているもののvalue属性を返します。

○サンプルコード3：ラジオボタンの選択状態を変更

// ラジオボタンの選択状態を変更する関数
function setSelectedValue(value) {
  const radioButtons = document.getElementsByName("gender");

  radioButtons.forEach((button) => {
    button.checked = button.value === value;
  });
}

上記のサンプルコードでは、setSelectedValue関数を使って、指定した値のラジオボタンを選択状態に変更できます。

name属性が”gender”のラジオボタンを取得し、指定された値と一致する場合、checked属性をtrueに設定します。

○サンプルコード4：ラジオボタンの選択イベントを処理

// ラジオボタンの選択イベントを処理する関数
function handleRadioButtonChange(event) {
  console.log("選択されたラジオボタンの値:", event.target.value);
}

const radioButtons = document.getElementsByName("gender");

radioButtons.forEach((button) => {
  button.addEventListener("change", handleRadioButtonChange);
});

上記のサンプルコードでは、handleRadioButtonChange関数を用いて、ラジオボタンの選択が変更された際にイベントを処理します。

name属性が”gender”のラジオボタンに対して、”change”イベントリスナーを追加し、選択されたラジオボタンの値をコンソールに出力します。

●ラジオボタンのカスタマイズ方法

○サンプルコード5：ラジオボタンのデザイン変更

ラジオボタンのデザインは、CSSを使用して変更することができます。

<style>
  /* ラジオボタンの基本スタイル */
  .radio-button {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin-right: 15px;
    cursor: pointer;
  }

  /* ラジオボタンのデフォルト表示を非表示にする */
  .radio-button input[type="radio"] {
    display: none;
  }

  /* ラジオボタンのカスタムデザインの外枠を作成 */
  .radio-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
  }

  /* 選択されたラジオボタンの外枠の色を変更 */
  .radio-button input[type="radio"]:checked::before {
    border-color: #3498db;
  }

  /* 選択されたラジオボタンの内側の円を作成 */
  .radio-button input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    background: #3498db;
    border-radius: 50%;
  }
</style>

<label class="radio-button">
  <input type="radio" name="gender" value="male">男性
</label>
<label class="radio-button">
  <input type="radio" name="gender" value="female">女性
</label>

上記のサンプルコードでは、CSSを用いてラジオボタンのデザインをカスタマイズしています。

選択されたラジオボタンの色を変更し、外枠と内側の円を作成しています。

○サンプルコード6：ラジオボタンのグループ化

ラジオボタンをグループ化するには、同じname属性を持つ複数のラジオボタンを作成します。

これにより、同じグループ内のラジオボタンは一度に1つだけ選択できるようになります。

<label>
  <input type="radio" name="gender" value="male">男性
</label>
<label>
  <input type="radio" name="gender" value="female">女性
</label>

●ラジオボタンの応用例

○サンプルコード7：ラジオボタンで表示内容を切り替える

ラジオボタンを使用して、画面上の表示内容を切り替える方法を紹介します。

次のサンプルコードでは、選択したラジオボタンに応じて異なるテキストが表示されるようになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ラジオボタンで表示内容を切り替える</title>
  <style>
    .content {
      display: none;
    }
  </style>
</head>
<body>
  <label>
    <input type="radio" name="content" value="1" onchange="switchContent()">コンテンツ1を表示
  </label>
  <label>
    <input type="radio" name="content" value="2" onchange="switchContent()">コンテンツ2を表示
  </label>

  <div id="content1" class="content">ここはコンテンツ1です。</div>
  <div id="content2" class="content">ここはコンテンツ2です。</div>

  <script>
    function switchContent() {
      const radioButtons = document.getElementsByName('content');
      for (const radioButton of radioButtons) {
        const contentDiv = document.getElementById('content' + radioButton.value);
        if (radioButton.checked) {
          contentDiv.style.display = 'block';
        } else {
          contentDiv.style.display = 'none';
        }
      }
    }
  </script>
</body>
</html>

上記のサンプルコードでは、onchangeイベントを用いてラジオボタンが選択された際にswitchContent()関数が実行されます。

switchContent()関数では、選択されたラジオボタンに応じて表示するコンテンツを切り替えています。

●注意点と対処法

ラジオボタンを使用する際には、次の点に注意しましょう。

  1. ラジオボタンのname属性は、グループ内のすべてのラジオボタンで同じにしてください。
    そうすることで、グループ内で1つだけ選択できるようになります。
  2. ラジオボタンの選択状態を変更する際には、JavaScriptを使用することができますが、ページの読み込み後に選択状態を変更した場合、changeイベントが発生しないことがあります。
    この場合、選択状態が変更されたことを検出するために別の方法を検討してください。

まとめ

ラジオボタンは、Webページ上でユーザーが複数の選択肢から1つだけを選択する際に非常に便利なUIコンポーネントです。

この記事で紹介した知識を活用して、ユーザーにとって使いやすく魅力的なWebページを作成していきましょう。