Question

我正在进行多问题调查，并且我试图将表单的名称和价值保存到对象中。我能够将名称和值变量放入警报中，但我希望在一次点击中看到所有值，就像带有对象的数组一样。 JS代码将[object Object]打印到页面上的警报中：

＆＃13;

$("button[type='submit']").click(function() {
  //get name and value of each question and put into object
  $("input[type='radio']:checked").each(function() {
    var name = $(this).attr("name");
    var value = $(this).attr("value");
    var obj = {
      name: value
    };
    alert(obj);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio">
              <input type="radio" name="A1" value="1" required>
              <span class="radio__control-indicator"></span>1</label>
<label class="radio">
              <input type="radio" name="A1" value="2" required>
              <span class="radio__control-indicator"></span>2</label>

<label class="radio">
              <input type="radio" name="A2" value="1" required>
              <span class="radio__control-indicator"></span>1</label>
<label class="radio">
              <input type="radio" name="A2" value="2" required>
              <span class="radio__control-indicator"></span>2</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>

＆＃13;

Answer 1

首先请注意，这正是您不应该使用alert()进行调试的原因;它强制数据类型。请改用console.log(obj)。其次，您应该使用val()从表单控件中获取值。

您的代码的主要问题是在提供变量作为对象的键时不能使用该语法。您将需要使用括号表示法，如下所示：

$("button[type='submit']").click(function() {
  $("input[type='radio']:checked").each(function() {
    var obj = {};
    obj[$(this).attr("name")] = $(this).val();
    console.log(obj);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label class="radio">
  <input type="radio" name="A1" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A1" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>

<label class="radio">
  <input type="radio" name="A2" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A2" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>

另请注意，如果您打算创建这些对象的数组，那么map()将是更好的解决方案：

$("button[type='submit']").click(function() {
  var arr = $("input[type='radio']:checked").map(function() {
    var obj = {};
    obj[$(this).attr("name")] = $(this).val();
    return obj;
  }).get();
  console.log(arr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label class="radio">
  <input type="radio" name="A1" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A1" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>

<label class="radio">
  <input type="radio" name="A2" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A2" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>

Answer 2

使用数组的8和array来显示它。

建议使用stringify来记录该内容。

console.log()

console.log的输出将显示在浏览器的开发者工具中。

将表单的名称和值放入对象数组中[name：value]

2 个答案: