在表单提交时设置JSON格式

（背景）我正在构建一个简单的表单构建器，用户可以在其中创建调查/问卷。一旦用户完成设计将用于创建实际表单的表单，我就会创建一个 json 输出。由于是表单构建器用户，因此正在设计/构建表单，因此可以添加复选框或单选字段或选择框选项，并可以编辑其值和标签。.HTML：

<form class="test-form droppedField checkbox">
<input type="text" name="title" placeholder="Title" class="ctrl-textbox editable"></input>
<input type="text" name="subtitle" placeholder="Sub Title" class="ctrl-textbox editable"></input>
<input type="text" name="name" placeholder="Name/Keyword" class="ctrl-textbox editable">
<input type="hidden" name="type" value="checkbox">
<ul>
    <li>
        <div class="ctrl-checkboxgroup children" name="children">
            <input type="checkbox">
            <input name="label" type="text" value="" placeholder="Option Label.." class="input-small editable">
            <input type="text" value="" name="value" placeholder="Option Value.." class="input-small editable opt-value">
        </div>
        <div class="ctrl-checkboxgroup children" name="children">
            <input type="checkbox">
            <input name="label" type="text" value="" placeholder="Option Label.." class="input-small editable">
            <input type="text" value="" name="value" placeholder="Option Value.." class="input-small editable opt-value">
        </div>
    </li>
</ul>....

我被困在生成 json 的点上。我希望能够获得一个更干净的 o/p，其中包含作为"孩子"分组的复选框选项/单选/选择框选项。示例 json（我认为会有所帮助）：

[
    {
        "title": "Gender",
        "subtitle": "This is a required question.",
        "name": "gender",
        "children": [
            {
                "label": "Male",
                "value": "male"
            },
            {
                "label": "Female",
                "value": "female"
            },
            {
                "label": "Non traditional",
                "value": "nontraditional"
            }
        ]
    }
]

我现在得到什么：

[
    {
        "title": "Gender",
        "subtitle": "This is a required question.",
        "name": "gender",
        "label":["Male", "Female", "Non traditional"],
        "value":["male", "female", "nontraditional"]
    } 
]

我在做什么：

$('.test-form').each(function () {
   output.push(JSON.stringify($(this).serializeObject()));
});
$.fn.serializeObject = function() {
          var o = {};
          var a = this.serializeArray();
          $.each(a, function() {
              if (o[this.name] !== undefined) {
                  if (!o[this.name].push) {
                      o[this.name] = [o[this.name]];
                  }
                  o[this.name].push(this.value || '');
              } else {
                  o[this.name] = this.value || '';
              }
          });
          return o;
        };

当我把孩子们推到一个数组中迭代它们时：

obj = [];
$('.children').each(function (i,v) {
    obj.push(obj[v.name] = v.value);
});
console.log(obj);

我得到：

["Male", "male", "Female", "female", "Non traditional", "nontraditional", label: "Non traditional", value: "nontraditional"] 

我很困惑我是否应该重新构建我的 HTML 或者我是否可以更改 JSON 输出。感谢任何形式的帮助。提前谢谢你。