javascript - 从 JS 发布表单值数组

Question

我有一个电子商务网站，我可以在其中将产品添加到多个类别。

我最初创建了一个类似这样的表单:

<form action='parse.php' method='post'>
//other form fields
<input type='checkbox' value='category1' class='product_category' name='product_category[]'>
<input type='checkbox' value='category2' class='product_category' name='product_category[]'>
<input type='checkbox' value='category3' class='product_category' name='product_category[]'>
//other form fields
<input type="submit" value="Go Live" name="submit" id="submit">
</form>

然后当它们被提交时，我可以像这样用 PHP 获取它们:

$categories = $_POST['product_category'];
foreach ($categories as $category){//do stuff here}

但是，现在网站变得越来越大，产品有更多与之相关的数据，这需要很长时间才能解析所有内容，因此我将尝试在我的提交上返回 false 并将内容通过以下方式发布到我的解析文件中AJAX，这样我就不必等待它解析所有内容来重新加载页面并添加更多内容。

所以我的新表单和 JS 看起来像这样:

<form action='parse' method='post'>
//other form fields
<input type='checkbox' value='category1' class='product_category' name='product_category[]'>
<input type='checkbox' value='category2' class='product_category' name='product_category[]'>
<input type='checkbox' value='category3' class='product_category' name='product_category[]'>
//other form fields
<input type="submit" value="Go Live" name="submit" id="submit" onclick="return false;">
</form>

$("#submit").on("click", function(){
    //get other variables
    var product_category = $('#product_category').val();
    var formData = new FormData();
    //append other values to formdata
    formData.append("product_category", product_category);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            console.log(this.responseText);
        }
    };
    xmlhttp.open("POST", "parse.php", true);
    xmlhttp.send(formData);
}

基本上我的问题是我得到一个数组作为我发布的变量，现在我只得到一个值。

如何获取所有产品类别的数组，而不是像我在其余部分中那样执行 var Product_category = $('#product_category').val();输入？

抱歉，我知道可能有一种简单的方法可以做到这一点，但 JS 不是我最好的语言。

Answer 1

将其用于每个选中的复选框:

$("input:checkbox:checked").each(function(){
    yourArray.push($(this).val());
});

或者如果您想要每个复选框值:

$("input:checkbox").each(function(){
    yourArray.push($(this).val());
});