javascript - 嵌套 jQuery radio 输入

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 属性添加到输入元素上。

但是为了让我提交到后端，我需要传递一个有效的模式来获取questionId和answerId。如果用户没有选择问题的答案，那么我必须传递空数组。所以像这样:

{
 "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>