【JavaScript】ラジオボタンで分岐するフォームの実装ガイド｜セクション表示切り替え・連動バリデーション・アニメーション・アクセシビリティまで解説

<fieldset>
  <legend>お客様の種別を選択してください</legend>
  <label><input type="radio" name="userType" value="personal" checked> 個人</label>
  <label><input type="radio" name="userType" value="corporate">       法人</label>
</fieldset>

// ① querySelector で checked なものを取得
const checked = document.querySelector('input[name="userType"]:checked');
console.log(checked?.value); // 'personal' など

// ② change イベントで取得（推奨：変更を即座に検知）
document.querySelectorAll('input[name="userType"]').forEach((radio) => {
  radio.addEventListener('change', (e) => {
    console.log(e.target.value); // 選択されたラジオの value
  });
});

// ③ RadioNodeList（form 要素経由）
const form = document.getElementById('myForm');
console.log(form.elements['userType'].value); // 選択中の value を直接取得

<form id="regForm">
  <fieldset>
    <legend>お客様の種別</legend>
    <label><input type="radio" name="userType" value="personal" checked> 個人</label>
    <label><input type="radio" name="userType" value="corporate">       法人</label>
  </fieldset>

  <!-- 個人用セクション -->
  <div id="section-personal" class="form-section">
    <div class="field-group">
      <label for="fullName">お名前 <span class="required">*</span></label>
      <input type="text" id="fullName" name="fullName" autocomplete="name">
    </div>
    <div class="field-group">
      <label for="birthdate">生年月日</label>
      <input type="date" id="birthdate" name="birthdate">
    </div>
  </div>

  <!-- 法人用セクション -->
  <div id="section-corporate" class="form-section" hidden>
    <div class="field-group">
      <label for="companyName">会社名 <span class="required">*</span></label>
      <input type="text" id="companyName" name="companyName" autocomplete="organization">
    </div>
    <div class="field-group">
      <label for="department">部署名</label>
      <input type="text" id="department" name="department" autocomplete="organization-title">
    </div>
  </div>

  <button type="submit">登録する</button>
</form>

const sections = {
  personal:  document.getElementById('section-personal'),
  corporate: document.getElementById('section-corporate'),
};

function switchSection(selectedValue) {
  Object.entries(sections).forEach(([key, el]) => {
    el.hidden = key !== selectedValue;
  });
}

// ラジオボタン変更時に切り替え
document.querySelectorAll('input[name="userType"]').forEach((radio) => {
  radio.addEventListener('change', (e) => switchSection(e.target.value));
});

// ページ読み込み時：現在の選択に合わせて初期化
const initial = document.querySelector('input[name="userType"]:checked');
if (initial) switchSection(initial.value);

.form-section {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.form-section.is-visible {
  max-height: 600px; /* コンテンツの最大高さより大きい値を設定 */
  opacity: 1;
}

function switchSection(selectedValue) {
  Object.entries(sections).forEach(([key, el]) => {
    if (key === selectedValue) {
      el.hidden = false; // まず DOM に表示
      // 1フレーム待ってからクラスを付与（トランジションを確実に発火させる）
      requestAnimationFrame(() => el.classList.add('is-visible'));
    } else {
      el.classList.remove('is-visible');
      // トランジション完了後に hidden にする
      el.addEventListener(
        'transitionend',
        () => { el.hidden = true; },
        { once: true }
      );
    }
  });
}

<fieldset>
  <legend>支払い方法</legend>
  <label><input type="radio" name="payment" value="credit" checked> クレジットカード</label>
  <label><input type="radio" name="payment" value="bank">           銀行振込</label>
  <label><input type="radio" name="payment" value="convenience">   コンビニ払い</label>
</fieldset>

<!-- data-show-when に表示したい value を指定（スペース区切りで複数可） -->
<div class="pay-section" data-show-when="credit">
  <label for="cardNumber">カード番号</label>
  <input type="text" id="cardNumber" name="cardNumber" placeholder="1234-5678-9012-3456">
</div>
<div class="pay-section" data-show-when="bank">
  <p>振込先：〇〇銀行 〇〇支店 普通 1234567（カブシキガイシャ〇〇）</p>
  <p>※ご入金確認後に発送いたします。</p>
</div>
<div class="pay-section" data-show-when="convenience">
  <label for="convenienceCode">払込番号</label>
  <input type="text" id="convenienceCode" name="convenienceCode" placeholder="注文後にメールでお知らせします">
</div>

function bindRadioBranch(radioName) {
  const radios   = document.querySelectorAll(`input[name='${radioName}']`);
  // data-show-when 属性でこのラジオグループに属するセクションを特定
  const sections = document.querySelectorAll('[data-show-when]');

  function update(value) {
    sections.forEach((el) => {
      const showWhen = el.dataset.showWhen.split(' '); // スペース区切りで複数値対応
      el.hidden = !showWhen.includes(value);
    });
  }

  radios.forEach((radio) => {
    radio.addEventListener('change', (e) => update(e.target.value));
  });

  // 初期化
  const checked = document.querySelector(`input[name='${radioName}']:checked`);
  if (checked) update(checked.value);
}

// 使い方：ラジオグループの name を渡すだけ
bindRadioBranch('payment');
bindRadioBranch('userType');

document.getElementById('regForm').addEventListener('submit', (e) => {
  e.preventDefault();

  // hidden でないセクション内の required フィールドだけ検証
  const visibleRequiredFields = Array.from(
    document.querySelectorAll('.form-section:not([hidden]) [required]')
  );

  let hasError = false;

  visibleRequiredFields.forEach((field) => {
    if (field.value.trim() === '') {
      field.setAttribute('aria-invalid', 'true');
      const errorEl = document.getElementById(field.getAttribute('aria-describedby'));
      if (errorEl) errorEl.textContent = '必須項目です';
      hasError = true;
    } else {
      field.setAttribute('aria-invalid', 'false');
      const errorEl = document.getElementById(field.getAttribute('aria-describedby'));
      if (errorEl) errorEl.textContent = '';
    }
  });

  if (hasError) {
    document.querySelector('.form-section:not([hidden]) [aria-invalid="true"]')?.focus();
    return;
  }

  console.log('送信OK');
  // fetch('/api/register', { method: 'POST', body: new FormData(e.target) });
});

function switchSectionWithDisable(selectedValue) {
  Object.entries(sections).forEach(([key, el]) => {
    const isVisible = key === selectedValue;
    el.hidden = !isVisible;

    // 非表示セクション内の全フォーム要素を disabled/enabled で切り替え
    el.querySelectorAll('input, select, textarea').forEach((field) => {
      field.disabled = !isVisible;
    });
  });
}

<!-- フォームの外に aria-live 領域を用意 -->
<div id="form-status" aria-live="polite" class="sr-only"></div>

/* 視覚的に隠しつつスクリーンリーダーには伝える */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

function switchSection(selectedValue) {
  Object.entries(sections).forEach(([key, el]) => {
    el.hidden = key !== selectedValue;
  });

  // スクリーンリーダーに切り替えを通知
  const labels = {
    personal:  '個人のお客様用フォームが表示されました',
    corporate: '法人のお客様用フォームが表示されました',
  };
  const status = document.getElementById('form-status');
  if (status) status.textContent = labels[selectedValue] ?? '';
}