jquery 变体产品的脚本

Question

我在 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 %}

JQUERY

$(document).ready(function(){
    $('.btn-primary').on('click', function(){
        var data = new Array();
        var form = $('form').serializeArray();
        var grouped = _.groupBy(form,"name");
        console.log(grouped);
    });
});

这是结果

Result

我的问题是我想要

这样的性别

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

就是在这一点上我被屏蔽了我已经尝试了很多想法但我还没有找到，谢谢

Answer 1

此代码有效，但如果您想动态呈现项目，则必须适应车把。

$(document).ready(function(){
   $( "form" ).submit(function( event ) {
      event.preventDefault();
        var data = $( this ).serializeArray();
        console.log( data );
   
        var formData = {};
        $.each(data, function(idx, val){
           if(!formData[val.name])
           {
              formData[val.name] = [];
           }
           formData[val.name].push(val.value);
        });
     });
  });

    <html>
    <body>
    <form>
     <label><input type="checkbox" value="yellow" name="color" />Yellow</label>
     <label><input type="checkbox" value="blue" name="color" />Blue</label>
     <label><input type="checkbox" value="adidas" name="brand" />Adidas</label>
     <label><input type="checkbox" value="puma" name="brand" />Puma</label>
     <input type="submit" value="send"/>
    </form>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    </body>
    </html>

jquery 变体产品的脚本

script for variant product with jquery

html

jquery

underscore.js

twig