Question

编辑：感谢Cole Faraday回答我的问题。

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

使用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();
}

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

1 个答案: