【ウィザード型のフォーム】jQueryでのセレクタへのアクセスについて

Question

ウィザード型（対話形式）でステップ1からステップ4までのフォームを入力し、
最終的にフォームに入力された内容を送信するというプログラムを作成しております。

ステップ3の入力段階で、

ステップ1、ステップ2で選択したラジオボタンに隣接した<label>要素内のテキストを取得したいと考えております。
jqueryを使用してアクセスするには、どのように記述するべきでしょうか。

可能でしたら、

$(this).prev('input[type=radio]:checked').next('label').text(); ← ステップ1で選択されたラジオボタンのテキストを取得
$(this).prev().prev('input[type=radio]:checked').next('label').text(); ← ステップ1で選択されたラジオボタンのテキストを取得

のようにアクセスするのではなく、ステップが増えた場合も考慮して、
eachなどを使用して、取得する方法などご教示いただけませんでしょうか。。

▼なお、htmlのソースは、以下のような形で考えております。

<div id="step01">
  <h3>ステップ1</h3>
  <input type="radio" name="sex" id="men" checked="checked"><label for="men">男性</label>←ここの”男性”へアクセスしたい
  <input type="radio" name="sex" id="women"><label for="women">女性</label>

  <div class="prev">戻る</div>
  <div class="next">次へ</div>
</div>

<div id="step02">
  <h3>ステップ2</h3>
  <input type="radio" name="marriage" id="married" checked="checked"><label for="married">既婚</label>←ここの”既婚”へアクセスしたい
  <input type="radio" name="marriage" id="unmarried"><label for="unmarried">未婚</label>

  <div class="prev">戻る</div>
  <div class="next">次へ</div>
</div>

<div id="step03" class="active">←ここをthisとした場合
  <h3>ステップ3</h3>
  <input type="radio" name="blood" id="a"><label for="a">A型</label>
  <input type="radio" name="blood" id="b"><label for="b">B型</label>
  <input type="radio" name="blood" id="ab"><label for="ab">AB型</label>
  <input type="radio" name="blood" id="o"><label for="o">O型</label>

  <div class="prev">戻る</div>
  <div class="next">次へ</div>
</div>

<div id="step04">
  <h3>ステップ4</h3>
  <input type="radio" name="public" id="release"><label for="release">公開</label>
  <input type="radio" name="public" id="private"><label for="private">非公開</label>

  <div class="send">送信</div>
</div>

何卒よろしくお願いいたします。

Comments

[kei344]

ステップ処理をどのように実現し、どういうタイミングで要素を取得したいのかがわかるJavaScriptコードも提示されてはいかがでしょうか。

Answer 1

ステップを一括取得しやすいように各ステップの<div>タグにclass="step"等を追加し、
eachメソッドのコールバック関数内で、選択中の<input>のname属性とラベルテキストを取得してFormDataに入れていくのが良いと思います。

const formData = new FormData()

$('.step').each(function () {
  const $input = $('input[type=radio]:checked', this)
  formData.append(
    $input.attr('name'),
    $input.next('label').text()
  )
})

それと普通は<input>タグにvalue属性をつけてその値を参照します。
こちらのほうがコストが少なく済みます。

  formData.append(
    $input.attr('name'),
    $input.val()
  )