用于带有jquery的变体产品的脚本

我用javascript开发了一个小脚本，但我有点受阻，下面是我的代码

HTML:

{% for key, pro in variant_name %}
    <p>
        <strong>{{ key }}</strong>
    </p>
    {% for p in pro %}
        <form method="post">
            <input type="checkbox" name="{{key}" value="{{p}}"> 
            <label>{{ p|upper }}</label>
        </form>
    {% endfor %}
{% endfor %}

结果如下

我的问题是，我想有一个性别像

Color: ['Yello', 'Blue']
Brand: ['Adidas'] 

---

正是在这一点上，我被阻止了，我已经尝试了很多想法，但我还没有找到，谢谢你，这段代码是有效的，但是如果你想动态地渲染这些项目，就必须适应把手

$（文档）.ready（函数（）{
$（“表格”）。提交（功能（事件）{
event.preventDefault（）；
var data=$（this.serializeArray（）；
控制台日志（数据）；
var formData={}；
$.each（数据、函数（idx、val）{
如果（！formData[val.name]）
{
formData[val.name]=[]；
}
formData[val.name].push（val.value）；
});
});
});

黄的
蓝色
阿迪达斯
彪马
你想要实现什么还不是很清楚。您想要一个带有品牌的复选框，每个品牌都有不同的颜色？我看到的一个错误是表单标记在for循环中。你应该把它放在循环之外，否则每个复选框都会有它自己的形式。不，我希望当我检查颜色，红色，黄色，我也是阿迪达斯，当我点击有btn primary类的按钮时，我得到这个结果，但我想得到这样的格式，例如{“name”：“color”}来像颜色一样变换：['blue'、'red']和Brand:['puma'、'adidas']如果可能的话，我不能手动创建一个带有名称颜色和品牌的数组，因为它是由动态生成的，我可以在我的后端添加一个新名称，例如Price等。更新：formData将按键保存数据。
Color: ['Yello', 'Blue']
Brand: ['Adidas']