Вложенные jQuery радиовходы

Question

У меня есть форма с вложенными входами, которые позволяют пользователю выбрать один вход для серии вопросов.

<div class="pollTemplate__questionWrapper" id="Q1">
  <ul class="carouselNav__list pollTemplate__answers pollTemplate__answers--text">
    <li class="pollTemplate__answer pollTemplate__answer--text carouselNav__listItem show" aria-hidden="false">
      <input type="radio" name="Q1" id="A1" class="pollTemplate__answerOption" data-key="0" value="7998">
      <label class="pollTemplate__answerLabel" for="A1">
               I'll do whatever it takes to keep this countertop looking gorgeous.</label>
    </li>

    <li class="pollTemplate__answer pollTemplate__answer--text carouselNav__listItem show" aria-hidden="false">
      <input type="radio" name="Q1" id="A2" class="pollTemplate__answerOption" data-key="1" value="3000">
      <label class="pollTemplate__answerLabel" for="A2">
                  I'll care for this countertop as part of my regular cleaning schedule.</label>
    </li>

    <li class="pollTemplate__answer pollTemplate__answer--text carouselNav__listItem show" aria-hidden="false">
      <input type="radio" name="Q1" id="A3" class="pollTemplate__answerOption" data-key="2" value="3666">
      <label class="pollTemplate__answerLabel" for="A3">
                 I'll pay attention to this countertop now and then.</label>
    </li>
  </ul>
</div>

<div class="pollTemplate__questionWrapper" id="Q2">
  <ul class="carouselNav__list pollTemplate__answers pollTemplate__answers--text">
    <li class="pollTemplate__answer pollTemplate__answer--text carouselNav__listItem show" aria-hidden="false">
      <input type="radio" name="Q2" id="A1" class="pollTemplate__answerOption" data-key="0" value="7998">
      <label class="pollTemplate__answerLabel" for="A1">
               I'll do whatever it takes to keep this countertop looking gorgeous.</label>
    </li>

    <li class="pollTemplate__answer pollTemplate__answer--text carouselNav__listItem show" aria-hidden="false">
      <input type="radio" name="Q2" id="A2" class="pollTemplate__answerOption" data-key="1" value="3000">
      <label class="pollTemplate__answerLabel" for="A2">
                  I'll care for this countertop as part of my regular cleaning schedule.</label>
    </li>

    <li class="pollTemplate__answer pollTemplate__answer--text carouselNav__listItem show" aria-hidden="false">
      <input type="radio" name="Q2" id="A3" class="pollTemplate__answerOption" data-key="2" value="3666">
      <label class="pollTemplate__answerLabel" for="A3">
                 I'll pay attention to this countertop now and then.</label>
    </li>
  </ul>
</div>

Я позволю пользователю выбирать только один ответ для каждого questionWrapper, а затем я добавлю свойство: checked в элемент ввода.

Но для того, чтобы я мог подчиниться бэкэнду, мне нужно передать действительную схему, которая захватывает вопрос и идентификатор ответа. Если пользователь не выбрал ответ на вопрос, то я должен передать пустой массив. Так что-то вроде этого:

{
 "answers": [
    {
      "questionId": "Q1",
      "answerIds": [
        "A3"
      ]
    },
{
      "questionId": "Q2",
      "answerIds": []
    },
{
      "questionId": "Q3",
      "answerIds": [
        "A4"
      ]
    }
 ]
}

Я не уверен, как правильно сделать это с jQuery, поэтому любая помощь будет оценена.

Answer 1

Полагаю, вы ищете что-то подобное?

const answers =
      [ { question : 'Q1', answer: '' } 
      , { question : 'Q2', answer: '' } 
      , { question : 'Q3', answer: '' } 
      ];
      
const myForm = document.getElementById('my-form');

myForm.oninput=e=>
  {
  if (!e.target.matches('input[type=radio]')) return

  (answers.find(el=>el.question==e.target.closest('fieldset').id)).answer = e.target.value;

  console.clear()
  console.log( JSON.stringify(answers,0,2))
  }

.as-console-wrapper { max-height: 100% !important; width: 40% !important; top: 0; left: 60% !important; }

<form id="my-form">
  <fieldset id="Q1">
    <ul>
      <li aria-hidden="false">
        <label>
          <input type="radio" name="Q1" value="7998">
          I'll do whatever it takes to keep this countertop looking gorgeous.
        </label>
      </li>
      <li aria-hidden="false">
        <label>
          <input type="radio" name="Q1" value="3000">
          I'll care for this countertop as part of my regular cleaning schedule.
        </label>
      </li>
      <li aria-hidden="false">
        <label>
          <input type="radio" name="Q1" value="3666">
          I'll pay attention to this countertop now and then.
        </label>
      </li>
    </ul>
  </fieldset>

  <fieldset id="Q2">
    <ul>
      <li aria-hidden="false">
        <label>
          <input type="radio" name="Q2" value="7998">
          I will never put identical IDs on an HTML page again.
        </label>
      </li>
      <li aria-hidden="false">
        <label>
          <input type="radio" name="Q2" value="3000">
          The next time I post on Stackoverflow I will take care to give an example of minimal and no frills code that confuses the nice contributors to this site
        </label>
      </li>
      <li aria-hidden="false">
        <label >
          <input type="radio" name="Q2" value="3666">
          The next time I post on Stackoverflow I will take care to look at least every ten minutes if I have my question  answered so as not to leave those who took care to answer me in the dark
        </label>
      </li>
    </ul>
  </fieldset>
</form>