javascript - 使用 true 或 false 在 JSON 中存储复选框值

Question

当用户提交表单并将它们的值存储为数组时，我会获取复选框的值，因此表单如下所示:

<!-- gym_create.html - I have removed the other inputs in the form for brevity -->

<form class="create-gym" role="form">
  <input type="checkbox" name="gymTags" value="Bodybuilding" id="tagBodybuilding" class="tag-checkbox"/>
  <input type="checkbox" name="gymTags" value="Powerlifting" id="tagPowerlifting" class="tag-checkbox"/>
  <button type="submit" class="btn create-form-submit">Save gym</button>
</form>

然后我在与表单关联的 JS 文件中收集该信息:

// gym_create.js - I have removed the other values I collect apart from the gymName value for brevity

Template.gymCreate.events({
  "submit .create-gym": function (e) {

    e.preventDefault();

    var tagOutput = JSON.stringify({
    tagOutput: $(':checkbox[name=gymTags]:checked').map(function() {
        return $(this).val();
      }).get()
    });

    // Collect values from form when submitted
    var gymDetails = {
      gymName: $(e.target).find('[name=gymName]').val(),
      gymTags: tagOutput,
    }

    // Call method here
  }
});

然后我可以使用 {{gymDetails.gymTags}} 在我的模板中输出这些，但这会在浏览器中产生以下内容:

"{"TAGOUTPUT":["BODYBUILDING","POWERLIFTING"]}"

我想要的是一种将值存储为 JSON 的方法，因此它们如下所示:

{"gymTags": {
  "bodybuilding": "true",
  "powerlifting": "false"
}}

这样我就可以单独输出每个标签，并且稍后只访问“真实”(已检查)的标签。

有人知道我是怎么做到的吗？我昨天一直在争论，我能想到的最好的是 =JSON.stringify

我不想将整个表单传递给 JSON，只是复选框，JSON.stringify 是我想做的事情，或者我找错了树。

Answer 1

我认为应该这样做。您只是返回输入的值。您想返回一个 json 对象，其中 value 是“索引”，checked 属性是对象的“值”。

var tagOutput = JSON.stringify({
    tagOutput: $(':checkbox[name=gymTags]').map(function() {
        var op = {};
        op[this.value] = this.checked;
        return op;
    }).get()
});

编辑:如 Da Rod 所述，要同时使用已选中和未选中的复选框，您必须删除“:checked”选择器。