如何使用同名的多个复选框自定义查询字符串？
Posted
技术标签:
【中文标题】如何使用同名的多个复选框自定义查询字符串？【英文标题】：How to customize query string with multiple checkboxes under same name? 【发布时间】：2014-12-26 16:47:21 【问题描述】：我有一个带有 get 方法的表单，用于从数据库中搜索项目（车辆）。该表单有多个复选框集。用户可以通过从品牌复选框列表中选择多个品牌来过滤搜索结果。同样，用户还可以从模型 chebox 列表等中对汽车模型应用过滤器。表格上有大约 10 个这样的过滤器。
这里是my表单的代码sn-p：
<form action='./search' method='get'>
<input type='checkbox' name='make[]' value='BMW'/>
<input type='checkbox' name='make[]' value='Mercedes'/>
<input type='checkbox' name='make[]' value='Honda'/>
<input type='checkbox' name='make[]' value='Toyota'/>
<input type='checkbox' name='make[]' value='Porsche'/>
......//Remaining Form
</form>
对于汽车模型，我也有类似的标记...有 10 个过滤器都使用复选框列表实现。
现在问题来了，当我提交表单时，我得到这样的 URL：
http://localhost/auto/search?make=BMW&make=Mercedes&make=Honda
这形成了一种我不喜欢的查询字符串，即它为所有检查的值重复“make”属性，并且对于剩余的 9 个过滤器也将这样做。这将导致非常长的难看 URL。
我想要的是我的 URL 应该是这样的：
http://localhost/auto/search?make=BMW,Mercedes,Honda
这要好得多，但我不知道如何实现。我尝试的是获取复选框的所有值，然后将它们写入隐藏字段值，以便在查询字符串中获得所需的格式。并取消设置用户选择的所有复选框并提交包含所有选择的隐藏字段的表单。但问题是提交表单时，我在 URL 中得到两个“make”字段，例如：
http://localhost/auto/search?make=&car_makes=BMW,Mercedes,Honda
其中 car_makes 是隐藏的输入字段，我在其中写入了 value 属性中的所有选择。
有什么解决办法吗？所以 make 属性不会被提交，但它会提交，因为它是表单的一部分。
谢谢。
【问题讨论】：
如果您将表单设置为post，则您的 URL 不会乱七八糟，php 会将任何提交的制作视为一个数组。
@Chris...用户可能还想与其他人共享 URL，在这种情况下，帖子将无法正常工作。谢谢你的建议。
【参考方案1】：
试试这些：
<html>
<head>
<script type="text/javascript">
function buildup()
var makes=document.getElementsByName('make[]');
var m=document.getElementById('make');
m.value='';
ms='';
for (var i = makes.length - 1; i >= 0; i--)
if(i>0)ms=ms+',';
ms=ms+makes[i].value;
m.value=ms;
document.getElementById('form').submit();
</script>
</head>
<body>
<input type='checkbox' name='make[]' value='BMW'/>
<input type='checkbox' name='make[]' value='Mercedes'/>
<input type='checkbox' name='make[]' value='Honda'/>
<input type='checkbox' name='make[]' value='Toyota'/>
<input type='checkbox' name='make[]' value='Porsche'/>
<form action='./search' id='form' method='get'>
<input type='hidden' name='make' id='make'>
<input type='button' value='submit' onclick='buildup()'>
</form>
</body>
【讨论】：
似乎我会在组合中使用你和 jeroen 的答案。谢谢你们。【参考方案2】：如果您不希望提交 make 输入，则应在提交表单之前禁用它们（或删除 name 属性...）。
将一个类添加到您不想提交的所有输入中，然后在表单提交之前执行类似的操作可能是最简单的：
html:
...
<input type='checkbox' name='make[]' value='BMW' class='dont-send-class' />
...
js:
$('.dont-send-class').prop("disabled", true);
// now you can submit the form
【讨论】：
这可能是要走的路。谢谢！以上是关于如何使用同名的多个复选框自定义查询字符串？的主要内容，如果未能解决你的问题，请参考以下文章
使用android中的自定义arrayadapter在listview中使用复选框检查后如何删除多个项目？
如何使用Doctrines Query Builder定义多个orWhere查询