如何将复选框值聚合为一个值以发布表单 Jquery

Question

有没有办法通过表单发布将值作为一个参数发布？

我有一个包含多个复选框组的表单，用户可以在其中选择多个选项。

<form id="form" action="url" method="post">
<input type="checkbox" name="option" id="first" value="1">
<input type="checkbox" name="option" id="first" value="2">
<input type="checkbox" name="option" id="first" value="3">
<input type="checkbox" name="option" id="first" value="4">

<input type="checkbox" name="option2" id="second" value="1">
<input type="checkbox" name="option2" id="second" value="2">
<input type="checkbox" name="option2" id="second" value="3">
<input type="checkbox" name="option2" id="second" value="4">

<input type="submit" name="submit" id="button">

我还编写了一些 Jquery，它连接每个名称的值并用逗号分隔它们，这样输出看起来像这样，我可以通过控制台看到它：

$("form").submit(function(){
        var arr=[];
        $('input:checked[name="option"]').each(function(){
        arr.push($(this).val());
            });

            $('#first').val(arr.join(','));
            console.log('#first').val();
        });

Console.log 输出：

option: 1,2,3,4 

但是，当我提交表单时，值会像这样（解析的版本）分开传递，并且不使用我编写的 Jquery 代码。

option: 1
option: 2
option: 3
option: 4

实际的查询字符串如下所示：

option=1&option=2&option=3&option=4

我想要完成的是参数被聚合或分组，以便最终输出看起来像这样

option=1,2,3,4&option2=1,2,3,4...

我不确定为什么它不使用 Jquery 写入值

Answer 1

这有点难看，但是如果你想组合复选框的值，而不是在处理表单action 的页面上的请求数据中看到它们，我会创建两个新的<input type="hidden" 字段.然后，当您使用 jQuery 处理表单的提交时，您可以将其他字段的值组合为关联隐藏字段的值。最后，在表单提交完成之前删除您不想在处理页面上看到的字段：

$(function() {
  $("#form").submit(function() {
    var optionCount = 0;
    var optionValue = "";
    $("input[name=option]:checked").each(function() {
      if (optionCount > 0) optionValue += ",";
      optionValue += $(this).val();
      optionCount++;
    });

    $("#option").val(optionValue);

    var optionCount = 0;
    var optionValue = "";
    $("input[name=option2]:checked").each(function() {
      if (optionCount > 0) optionValue += ",";
      optionValue += $(this).val();
      optionCount++;
    });
    $("#option2").val(optionValue);

    $("input:checkbox").remove();
  });
  $("#received").html(decodeURIComponent(window.location.search));
});

示例

• 表单提交仅适用于全页视图：https://codepen.io/VAggrippino/full/XNBQEo/
• 在编辑器视图中查看代码：https://codepen.io/VAggrippino/pen/XNBQEo/

注意

• 您不能像在原始示例代码中那样拥有多个具有相同 id 的字段。

Answer 2

这不是最好的实现方式，最好通过AJAX进行POST调用并将选项作为参数发送。

在表单中添加隐藏输入。

<input type="hidden" id="checkedValues" value="">

把你的js改成这样：

$("form").submit(function(){
     var arr=[];
     $('input:checked[name="option"]').each(function(){
        arr.push($(this).val());
     });

     $('#checkedValues').val(arr.join(','));
     console.log($('#checkedValues').val());
});

Answer 3

您可以创建ajax POST 并向其提交您的数据类型。看下面的sn-p：

$("form").submit(function(e) {
  e.preventDefault();
  var arr = [];
  $('input:checked[name="option"]').each(function() {
    arr.push($(this).val());
  });
  var myData = arr.join(',');
  $.ajax({
    'url': 'url',
    'type': 'POST',
    'data': {
      options: myData
    },
  });
  return false;
});

看到这个fiddle