如何使用jQuery根据选中的复选框创建url

Question

我有这样的小表格

<form name="search_something" action=/results method="get">
<input type=checkbox name="choice1">Choice 1<br>
<input type=checkbox name="choice2">Choice 2<br>
<input type=checkbox name="choice3">Choice 3<br>
<input type=checkbox name="choice4">Choice 4<p>
<input type=submit value="Search">
</form>

如果我检查choice1和choice4，然后单击“搜索”，它将返回如下网址：

http://example.com/results?choice2=on&choice4=on

但是我想要做的是这样的URL：

http://example.com/results?choice=choice2&choice=choice4

请帮助我。

Answer 1

您可以按照以下方式进行操作。（您必须对现有的html进行如下修改：]]

HTML

<form name="search_something" action=/results method="get">
  <input type="checkbox" name="choice" value="choice1">Choice 1<br>
  <input type="checkbox" name="choice" value="choice2">Choice 2<br>
  <input type="checkbox" name="choice" value="choice3">Choice 3<br>
  <input type="checkbox" name="choice" value="choice4">Choice 4<p>
  <input type="button" id="btnSearch" value="Search">
</form>

JS：

$(document).ready(function(){
   $("#btnSearch").click(function(){
   //var url="http://example.com/results?choice=choice2&choice=choice4"
   var url="http://example.com/results?choice=";
   var flag=false;
   $("input:checkbox[name=choice]:checked").each(function(){
       if(!flag)
       {
         url=url+$(this).val();
         flag=true;// To trace if first query string added
       }
       else
       {
         url=url+"&choice="+$(this).val();
       }         
     });
     //alert(url);
     window.location = url;
   });
});

DEMO

Answer 2

通过使用您的html代码（不更改html）：

Answer 3

请告诉我，如果所有params键都相同，如何从url查询字符串中获取params值。无论如何，它非常简单，您可以使用jQuery：