将 url 与提交表单中的多个相同 args 结合答案

【问题标题】：Combine url with multiple same args from submitted form将 url 与提交表单中的多个相同 args 结合
【发布时间】：2016-12-07 13:04:41
【问题描述】：

我有一个带有多个复选框的表单，都称为过滤器。提交表单后，它们会按预期添加到 URL“example.com/?filter=var”。

When there are multiple checkboxes selected, they get added to the url like so: "example.com/?filter=var&filter=var2".

是否有可能以某种方式改变这一点？我需要它们在 url 中作为“example.com/?filter=var+var2”。

这有可能以某种方式实现吗？使用 Javascript 没问题。

【问题讨论】：

标签： javascript jquery forms checkbox

【解决方案1】：

向您的提交按钮添加一个函数调用，并留下您的表单标签，如<form>。

$(function () {
  $('#target').click(function () {
    var checkValues = $('input[name=checkboxlist]:checked').map(function() {
        return $(this).parent().text();
    }).get().join('+');
    window.location.href = "http://example.com/?filter="+checkValues;
  });
});

【讨论】：

我实际上只是再次尝试过，它会将它们添加到 URL 中，如下所示：“example.com/?filter=var,var2”，用逗号而不是 +'s。
实际上，在get(). 之后添加.join('+') 有效;)

【解决方案2】：

您可以为此使用hidden 字段，并在提交事件中使用过滤器设置它的值。 hidden 将获得名称 filter 并且复选框的值将被忽略：

//$("form").on("submit", function() {
$('input[type="submit"]').on("click", function() {
	var filter = [];
	$('input[type="checkbox"]:checked').each(function() {
  	filter.push(this.value);
  });
  
  $("#filter").val(filter.join("+"));
  console.log("filters", filter.join("+"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="hidden" name="filter" id="filter" />
  <input type="checkbox" value="val1" />
  <input type="checkbox" value="val2" />
  <input type="checkbox" value="val3" />
  <input type="submit" />
</form>

使用$("form").on("submit", function() { 代替按钮中的事件。我只是评论了它，因为您无法在 StackOverflow sn-p 中提交。

Fiddle Version

【讨论】：