Question

我有一个包含多个复选框的表单，全部称为过滤器。提交表单后，它们会按预期添加到URL＆＃34; example.com/？filter = var＆＃34 ;.

如果选中了多个复选框，则会将其添加到网址中，如下所示：＆＃34; example.com/？filter = var＆amp; filter = var2＆＃34;。

有可能以某种方式改变这种情况吗？我在网址中需要它们作为＆＃34; example.com/？filter = var + var2＆＃34;。

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

Answer 1

您可以使用hidden字段，并在提交事件中使用过滤器设置其值。隐藏的名称为filter，复选框为＆＃39;值将被忽略：

＆＃13;

//$("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("+"));
});

＆＃13;

<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>

＆＃13;

使用$("form").on("submit", function() {代替按钮中的事件。我刚评论过它，因为您无法在StackOverflow片段中提交。

Fiddle Version

Answer 2

向“提交”按钮添加功能调用，并保留表单标记<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与提交的表单中的多个相同args组合在一起

2 个答案: