【6日でできるJavaScript入門】フォームの操作②

　Webフォームには「テキストボックス」「チェックボックス」だけでなく、「ラジオボタン」「セレクトボックス」など多様な入力部品があります。JavaScriptを使えば選択値の取得・表示内容の動的変更など、多彩なユーザーインタラクションが実現できます。

ここでは「ラジオボタン」と「セレクトボックス」の取得と応用を、実例を使いながら詳しく解説します。

フォーム部品	主なプロパティ	役割
ラジオボタン	checked, value	選択状態（ON/OFF）、選択値の取得
セレクトボックス	value, options	選択値の取得、選択肢一覧の操作

１．ラジオボタンで選択値・状態を取得する

1.1. ラジオボタンのcheckedとvalue

　ラジオボタン（<input type="radio">）は、同じname属性を持つグループのうち1つだけがONになります。「どれが選ばれているか」は.checkedプロパティで、値は.valueで取得できます。

書式・構文	意味
要素.checked	ONならtrue、OFFならfalse
要素.value	value属性の値を取得

1.2. サンプル：好きな動物で画像を切り替え

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

working2-forms ダウンロード

ファイル名： lesson24-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🦁 ラジオボタンで画像切り替え</title>
  <style>
    #animalImg { width:180px; height:120px; display:block; margin:18px 0; border-radius:8px; box-shadow:0 0 6px #888; }
  </style>
</head>
<body>
  <h1>🦁 好きな動物を選んでください</h1>
  <form id="animalForm">
    <label><input type="radio" name="animal" value="lion" checked> ライオン</label>
    <label><input type="radio" name="animal" value="panda"> パンダ</label>
    <label><input type="radio" name="animal" value="penguin"> ペンギン</label>
  </form>
  <img id="animalImg" src="lion.jpg" alt="選択された動物">
  <div id="message">ライオンが選択されています。</div>
  <script>
    const imgMap = {
      lion: {src:'lion.jpg', msg:'ライオンが選択されています。'},
      panda: {src:'panda.jpg', msg:'パンダが選択されています。'},
      penguin: {src:'penguin.jpg', msg:'ペンギンが選択されています。'}
    };
    document.getElementById('animalForm').addEventListener('change', function() {
      const radios = document.querySelectorAll('input[name="animal"]');
      for (let i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
          document.getElementById('animalImg').setAttribute('src', imgMap[radios[i].value].src);
          document.getElementById('message').textContent = imgMap[radios[i].value].msg;
          break;
        }
      }
    });
  </script>
</body>
</html>

ブラウザの出力例

出力例
ラジオボタンを切り替えると、画像とメッセージが変わります。

２．セレクトボックスの値取得・連動処理

2.1. セレクトボックスの基本とvalue

　セレクトボックス（<select>～<option>）は、選択した<option>のvalueをselect要素の.valueで一発取得できます。

書式	意味
document.getElementById('ID').value	選択肢のvalueを取得

2.2. サンプル：都道府県選択で都市一覧を動的表示

ファイル名： lesson24-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🏙️ 地域ごとに都市リスト切り替え</title>
</head>
<body>
  <h1>🏙️ 地域選択で都市リスト表示</h1>
  <div>
    地域を選択してください：
    <select id="area">
      <option value="hokkaido">北海道</option>
      <option value="tohoku">東北</option>
      <option value="kanto">関東</option>
    </select>
  </div>
  <ul id="cities">
    <li>札幌市</li>
    <li>旭川市</li>
    <li>函館市</li>
  </ul>
  <script>
    const areaCities = {
      hokkaido: ['札幌市', '旭川市', '函館市'],
      tohoku: ['仙台市', '盛岡市', '秋田市', '山形市'],
      kanto: ['東京', '横浜', 'さいたま', '千葉', '宇都宮']
    };
    document.getElementById('area').addEventListener('change', function() {
      const area = this.value;
      const list = document.getElementById('cities');
      list.innerHTML = '';
      for (let city of areaCities[area]) {
        list.insertAdjacentHTML('beforeend', `<li>${city}</li>`);
      }
    });
  </script>
</body>
</html>

ブラウザの出力例

出力例
地域を変更すると都市リストが切り替わります。

３．発展：ラジオ・セレクトの応用と実用例

3.1. サンプル：商品オプションで価格を自動表示

ファイル名： lesson24-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🍕 ピザ注文フォーム応用サンプル</title>
  <style>
    .form-block { margin: 16px 0; }
    #total { font-size: 1.3em; font-weight: bold; color: #E67E22; }
  </style>
</head>
<body>
  <h1>🍕 ピザ注文フォーム</h1>
  <form id="pizzaForm">
    <div class="form-block">
      <strong>サイズを選択：</strong><br>
      <label><input type="radio" name="size" value="S" checked> Sサイズ（900円）</label>
      <label><input type="radio" name="size" value="M"> Mサイズ（1,200円）</label>
      <label><input type="radio" name="size" value="L"> Lサイズ（1,500円）</label>
    </div>
    <div class="form-block">
      <strong>トッピングを選択：</strong><br>
      <select id="topping">
        <option value="cheese">チーズ追加（+100円）</option>
        <option value="salami">サラミ追加（+200円）</option>
        <option value="vege">野菜追加（+150円）</option>
        <option value="none" selected>追加なし（+0円）</option>
      </select>
    </div>
    <div class="form-block">
      <span>合計金額：<span id="total">900円</span></span>
    </div>
  </form>

  <script>
    const sizePrice = { S: 900, M: 1200, L: 1500 };
    const toppingPrice = { cheese: 100, salami: 200, vege: 150, none: 0 };

    // 入力変更イベントですべての合計金額を再計算
    document.getElementById('pizzaForm').addEventListener('change', calcTotal);

    function calcTotal() {
      // サイズ取得（ラジオボタン）
      let size = document.querySelector('input[name="size"]:checked').value;
      // トッピング取得（セレクトボックス）
      let topping = document.getElementById('topping').value;
      // 金額計算
      let total = sizePrice[size] + toppingPrice[topping];
      // 表示
      document.getElementById('total').textContent = total + '円';
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例

初期状態：Sサイズ＋追加なし → 900円
Mサイズ＋サラミ → 1,400円
Lサイズ＋野菜 → 1,650円

プログラムのポイント解説

技術要素	解説
<input type="radio">	ラジオボタンで「サイズ」選択（name属性を共通にすることで1つのみ選択）
<select>＋<option>	セレクトボックスで「トッピング」選択
.querySelector('input[name=]:checked')	選択中のラジオボタン（size）の値を取得
.value	セレクトボックス（topping）選択値を取得
addEventListener('change', ...)	入力内容が変更されたらリアルタイムで合計金額を再計算
オブジェクトによる金額管理	各サイズやトッピングの価格はオブジェクトで管理し、可読性や拡張性を高めている。
合計金額の自動計算	size・toppingの値に応じて自動で金額を計算し、`textContent`で表示を即時反映

　このようにラジオ＋セレクトの組み合わせを応用すると、実用的な動的フォームが簡単に作成できます！

まとめ

ラジオボタン：checkedで選択、valueで値を取得
セレクトボックス：select要素の.valueで一発取得
選択値に応じた表示・処理が容易にできる
実践例を通して「選択値の取得・動的反映」に慣れておこう！

　ラジオボタンやセレクトボックスを使いこなせば、インタラクティブなフォーム設計がよりパワフルになります！