如何使用 jQuery 记录调查中多个不同单选按钮的答案

Question

编辑：感谢科尔法拉第回答我的问题。

我正在尝试制作一个带有多个单选按钮的表单，一旦按下提交按钮，它将为每个不同的问题记录选定的单选按钮。

使用jQuery执行此操作的最佳方法是什么？我不需要使用我当前的设置。如果有更好的方法可以使用不同的单选按钮或不同的输入法来做到这一点，我也愿意接受这些建议。谢谢

<form id="myForm">
    <div class="row justify-content-center" id="mainContainer" style="background-color: #c6d7f2">
      <div class="col-md-8" style="margin: 0 auto; background-color: white">
<h2 class="subtitle">Flavors</h2>
        <div class="col-md-8" style="background-color: #c9c9c9; margin: 0 auto;">
          <div class=text-right>
            <div style="float: left;">
              Spicy:
            </div>
            <label class="custom-control custom-radio">
              <input id="radio1" name="spicy" type="radio" class="custom-control-input" value=0>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">0</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio2" name="spicy" type="radio" class="custom-control-input" value=1>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">1</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio3" name="spicy" type="radio" class="custom-control-input" value=2>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">2</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio4" name="spicy" type="radio" class="custom-control-input" value=3>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">3</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio5" name="spicy" type="radio" class="custom-control-input" value=4>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">4</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio6" name="spicy" type="radio" class="custom-control-input" value=5>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">5</span>
            </label>
          </div>
        </div>
        <div class="col-md-8" style="margin: 0 auto;">
          <div class="text-right">
            <div style="float: left;">
              Sour:
            </div>
            <label class="custom-control custom-radio">
              <input id="radio1" name="sour" type="radio" class="custom-control-input" value=0>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">0</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio2" name="sour" type="radio" class="custom-control-input" value=1>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">1</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio3" name="sour" type="radio" class="custom-control-input" value=2>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">2</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio4" name="sour" type="radio" class="custom-control-input" value=3>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">3</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio5" name="sour" type="radio" class="custom-control-input" value=4>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">4</span>
            </label>
            <label class="custom-control custom-radio">
              <input id="radio6" name="sour" type="radio" class="custom-control-input" value=5>
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">5</span>
            </label>
          </div>
        </div>
<div id="submitButtonContainer">
          <button type="submit" class="btn btn-primary" id="submitButton">Submit</button>
        </div>
      </form>

Answer 1

我认为您要查找的是.serializeArray（）。要将信息存储在键值对对象中，请执行以下操作：

function submitForm(){
  var formObj = {};
    var inputs = $("#myForm").serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
  alert(formObj["spicy"]);
  alert(formObj["sour"]);
}

并更改表单标签，使其在提交时调用 javascript 函数

<form id="myForm" onsubmit="submitForm()">
  <!-- Normal form html elements -->
</form>

如果你想将信息保留为JSON对象，你可以让它更简单，只需将javascript更改为这个

function submitForm(){
    var inputs = $("#myForm").serializeArray();
}