使用javascript将带有数组的表单转换为不带重复项的逗号分隔查询字符串

我想从中更改查询字符串

第一阵列[]=0001和第一阵列[]=0002和第二阵列[]=0003和第二阵列[]=0004 ？第一阵列=00010002和第二阵列=00030004

我想我就快到了，但问题是在javascript处理完表单后，两个数组的数组值是相同的。以下是表格：

<form method="get" action="" class="productFilter">
    <input type="checkbox" name="firstArray[]" id="" value="0001">0001
    <input type="checkbox" name="firstArray[]" id="" value="0002">0002
    <input type="checkbox" name="secondArray[]" id="" value="0003">0003
    <input type="checkbox" name="secondArray[]" id="" value="0004">0004
    <input type="submit" name="submit" value="test">
</form>

}))

我理解为什么我的'commaSeparated'变量同时包含firstArray和secondArray输入的值，因此当我选中所有框时，得到的查询字符串是：

？第一阵列=0001000200030004和第二阵列=0001000200030004 当我想要的时候 ？firstArray=00010002和secondArray=00030004

---

不过我不知道怎么修。我需要将表单数组的值存储在单独的变量中，对吗？需要注意的是，我不知道将有多少表单元素以及它们将在我的生产代码中被调用。

我的策略是

• 首先，收集所有属于数组的输入字段
• 使用数组名作为键，通过将值推送到数组来收集散列中的值
• 从DOM中删除它们
• 然后，在第二步中，通过散列的键循环散列
• 输入新表单字段，将数组名称设置为name属性，将hash元素值设置为value属性=包含用户检查的所有值的数组

这样，服务器将为每个数组接收一个字段，其中包含该数组的检查值的逗号分隔列表

  $('.productFilter').on('submit', function() {

       var arrayValues = {};

      // Gather values into a hash, the keys being the array names
      $('input[name$="[]"]').each(function(index,item) {
          if (item.checked) {
            var arrayName = item.name.replace(/\[\]$/,"");
            if (!arrayValues.hasOwnProperty(arrayName)) arrayValues[arrayName] = [];
            arrayValues[arrayName].push(item.value);
          }
          $(item).remove();
      });

      // Create new form fields with the collected values per array
      Object.keys(arrayValues).forEach( function(key) { 
        $("form").append( 
           $('<input type="hidden"></input>')
              .val(arrayValues[key])
              .attr("name",key) );
      });    

  });

$（'.productFilter'）。在（'submit'，function（）上{
var arrayvalue={}；
//将值聚集到散列中，键是数组名
$（'input[name$=“[]”）。每个（函数（索引，项）{
如果（选中项）{
var arrayName=item.name.replace（/\[\]$/，“”）；
如果（！arrayValues.hasOwnProperty（arrayName））arrayValues[arrayName]=[]；
ArrayValue[arrayName].push（item.value）；
}
$（项）.remove（）；
});
//使用每个数组收集的值创建新表单字段
key（数组值）.forEach（函数（键）{
$（“表格”）。附加（
$('')
.val（数组值[键]）
.attr（“名称”，键））；
});    
});

我认为一个有趣的方法可能是使用对象属性来帮助唯一地整理参数和值。这段代码使用reduce处理一组已检查的输入，但如果需要，可以使用更传统的循环

$（'.productFilter'）。在（'submit'，function（）上{
// -----------------------
//将select结果转换为数组
// -----------------------
var checkedInputs=$.makeArray（$（'input[name$=“[]”]：checked'）；
// -----------------------
// -----------------------
//将输入数组转换为具有嵌套属性的对象
// -----------------------
var checkedInputsObj=checkedInputs.reduce（函数（对象，项）{
obj[item.name]=（obj[item.name]|{}）；
obj[item.name][item.value]=true；
返回obj
}, {});
// -----------------------
// -----------------------
//建立我们的查询字符串
// -----------------------
变量qs=（函数（obj）{
var_qs=“？”；
for（obj中的var参数）{
_qs+=参数切片（0，-2）+“=”；
对于（对象[param]中的var val]）{{u qs+=val+“，”；}
_qs=_qs.slice（0，-1）+“和”；
}
返回片（0，-1）；
})（已检查的计算机系统）；
// -----------------------
控制台日志（qs）
});

0001
0002
0003
0004

为每个数组获取selected的值
使用纯JS（无jQuery）执行此操作的一种方法如下：


var f=document.querySelector（“表单”），
cba1=Array.from（f.querySelectorAll（“输入[name='firstArray[]']”），
cba2=Array.from（f.querySelectorAll（“输入[name='secondArray[]']”）；
f、 onsubmit=函数（e）{
var fStr=cba1.reduce（（p，c）=>c.checked？p.concat（c.value）：p，[]）。join（，“”），
sStr=cba2.reduce（（p，c）=>c.checked？p.concat（c.value）：p，[]）。join（，“”），
qStr=！！fStr | |！！sStr？“：”；
！！fStr&（qStr+=“firstArray=”+fStr）；
！！fStr&&！！sStr&&（qStr+=“&”）；
！！sStr&（qStr+=“secondArray=“+sStr”）；
控制台日志（qStr）；
}

0001
0002
0003
0004
我认为@Marc想从表单中构建查询字符串，而不是相反。您可能还需要最后一个“）”来结束on（），感谢您提供关于结束括号的提示：更正。我认为@Marc希望字段以正确的方式传输到服务器。如果他在执行上述onSubmit函数后使用get方法提交此表单，他将准确地获得所需的查询字符串（字段也将通过POST请求正确传输）。我对回复延迟表示歉意，但非常感谢这段可爱的代码，它完全符合我的预期！
  $('.productFilter').on('submit', function() {

       var arrayValues = {};

      // Gather values into a hash, the keys being the array names
      $('input[name$="[]"]').each(function(index,item) {
          if (item.checked) {
            var arrayName = item.name.replace(/\[\]$/,"");
            if (!arrayValues.hasOwnProperty(arrayName)) arrayValues[arrayName] = [];
            arrayValues[arrayName].push(item.value);
          }
          $(item).remove();
      });

      // Create new form fields with the collected values per array
      Object.keys(arrayValues).forEach( function(key) { 
        $("form").append( 
           $('<input type="hidden"></input>')
              .val(arrayValues[key])
              .attr("name",key) );
      });    

  });

   var checked_first = []
    $("input[name='firstArray[]']:checked").each(function ()
    {
        checked_first.push($(this).val());
    });

var checked_second = []
    $("input[name='secondArray[]']:checked").each(function ()
    {
        checked_second.push($(this).val());
    });