質問: ウィザード型(対話形式)でステップ1からステップ4までのフォームを入力し、 最終的にフォームに入力された内容を送信するというプログラムを作成しております。 ステップ3の入力段階で、 ステップ1、ステップ2で選択したラジオボタンに隣接した要素内のテキストを取得したいと考えております。 jqueryを使用してアクセスするには、どのように記述するべきでしょうか。 可能でしたら、 $(this).prev('input[type=radio]:checked').next('label').text(); ← ステップ1で選択されたラジオボタンのテキストを取得 $(this).prev().prev('input[type=radio]:checked').next('label').text(); ← ステップ1で選択されたラジオボタンのテキストを取得 のようにアクセスするのではなく、ステップが増えた場合も考慮して、 eachなどを使用して、取得する方法などご教示いただけませんでしょうか。。 ▼なお、htmlのソースは、以下のような形で考えております。 ``` ステップ1 男性←ここの”男性”へアクセスしたい 女性 戻る 次へ ステップ2 既婚←ここの”既婚”へアクセスしたい 未婚 戻る 次へ ←ここをthisとした場合 ステップ3 A型 B型 AB型 O型 戻る 次へ ステップ4 公開 非公開 送信 ``` 何卒よろしくお願いいたします。
回答: ステップを一括取得しやすいように各ステップの``タグに`class="step"`等を追加し、 `each`メソッドのコールバック関数内で、選択中の``の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() ) }) ``` それと普通は``タグにvalue属性をつけてその値を参照します。 こちらのほうがコストが少なく済みます。 ``` formData.append( $input.attr('name'), $input.val() ) ```