javascriptを使って、ラジオボタンによる要素の表示・非表示の実装方法

Posted on by

はじめに

Web開発において、ユーザーの入力に応じてページの内容を動的に変更することは一般的です。
特に、ラジオボタンを使った表示・非表示の切り替えは、
フォームの使いやすさを大幅に向上させることができます。
本記事では、この機能をHTML、CSS、JavaScriptを使って実装する方法を紹介します。

HTMLとラジオボタンの基本

まず、HTMLでは<input type="radio">を使用してラジオボタンを作成します。
ラジオボタンは、複数の選択肢の中から1つを選ぶ際に用いられます。

サンプルコード

<form>
  <input type="radio" id="option1" name="option" value="1">
  <label for="option1">オプション1</label>

  <input type="radio" id="option2" name="option" value="2">
  <label for="option2">オプション2</label>
</form>

<div id="content1" style="display: none;">
  オプション1が選択された時に表示
</div>

<div id="content2" style="display: none;">
  オプション2が選択された時に表示
</div>

CSSでのスタイル設定

CSSを使って、表示・非表示の要素にスタイルを適用します。
最初はdisplay: none;を設定して非表示にします。

サンプルCSS

#content1, #content2 {
  display: none;
}

JavaScriptでの動的な挙動

JavaScriptを使用して、ラジオボタンの選択状態に応じて要素の表示・非表示を制御します。

サンプルJavaScript

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('input[name="option"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
      document.getElementById('content1').style.display = this.value === '1' ? 'block' : 'none';
      document.getElementById('content2').style.display = this.value === '2' ? 'block' : 'none';
    });
  });
});

実装の解説

  • HTMLでは、同一名（name属性）のラジオボタンがグループ化され、一度に1つの選択肢のみが選べるようになっています。
  • CSSで、最初は関連する要素を非表示に設定します。
  • JavaScriptでは、DOMContentLoadedイベントを使用してページ読み込み完了後にスクリプトを実行します。
  • ラジオボタンのchangeイベントを監視し、選択された値に基づいて対応する要素の表示・非表示を切り替えます。

その他の考慮事項

  • アクセシビリティの観点から、ラジオボタンとラベルはfor属性を使って関連付けることが重要です。
  • レスポンシブデザインやブラウザの互換性も考慮する必要があります。
  • JavaScriptを使わずにCSSのみで同様の動作を実現する方法もありますが、この記事ではJavaScriptを使用したアプローチを採用しています。

まとめ

ラジオボタンの選択による要素の表示・非表示の切り替えは、
ユーザーインターフェースの使いやすさを高める効果的な方法です。
HTML、CSS、JavaScriptを組み合わせることで、この機能を簡単に実装することができます。