将表单的名称和值放入对象数组[名称：值]答案

【问题标题】：put name and value of form into an array of objects [name: value]将表单的名称和值放入对象数组[名称：值]
【发布时间】：2018-07-22 15:04:14
【问题描述】：

我正在做一个多问题调查，我正在尝试将我的表单的名称和值保存到一个对象中。我可以将名称和值变量放入警报中，但我希望一次性查看所有值，例如带有对象的数组。 JS代码将[object Object]打印到页面的alert中：

$("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);
  });
});

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

【问题讨论】：

标签： javascript jquery html javascript-objects

【解决方案1】：

使用array 和stringify 数组来显示它。

建议使用console.log() 记录。

var array = [];
$("input[type='radio']:checked").each(function(){  
    var name = $(this).attr("name");
    var value = $(this).attr("value");
    var obj = {name: value};
    array.push(obj);
});

console.log(array); // or console.log(JSON.strigify(array)) or alert(JSON.strigify(array)).

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

【讨论】：

【解决方案2】：

首先请注意，这正是您不应该使用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>

【讨论】：