我正在构建一个搜索表单，在结果页面上有几个过滤选项。
这是一个基本的搜索表单，结果显示在一个友好的网址中，例如：domain.com/resuts/country/age/type/
过滤器是简单的复选框，单击时应使用查询字符串重新加载页面，以识别已选中/未选中的内容。 （没有提交，最好更新会在每次单击复选框时重建查询字符串）。
因此，例如，在单击某些复选框时，我们会在最后构建一个查询字符串， 例如：domain.com/resuts/england/20-29/female/?scene=hipster&status=single
谁能指点我一个 jquery 资源或代码 sn-p 可以帮助完成这项工作？
非常感谢，
伊恩。
【问题讨论】：
当您传递一个键值对时，jQuery.get 函数将自动处理创建和构建查询字符串：
http://docs.jquery.com/Ajax/jQuery.get
您可以将此选择器用于选中的复选框：
$('input:checkbox:checked')
【讨论】：
如果你的 html 看起来像
<input type="checkbox" name="scene" value="hipster" />
我猜你可以使用类似的东西
var tmp = [];
$('input:checkbox:checked').each(function(){
tmp.push($(this).attr('name') + '=' + $(this).val());
});
var filters = tmp.join('&');
【讨论】：
这是您要找的吗？当您单击复选框时，它会在顶部显示选定的值。当您提交表单时，它会在警报中显示相同的值
<div id="buffer" style="height:2em; border:1px solid black; margin-bottom:1em"></div>
$().ready(function(){
//just a simple demo, you could filter the page by the value of the checkbox
$('form input:checkbox').bind('click',function(){
if($(this).attr('checked')==false){
//remove it from the query string
var pieces=$('#buffer').text().split('/');
var $this_val=$(this).val();
for(var i=0;i<pieces.length-1;i++){
//console.log($(this).val());
//console.log(pieces[i]);
if(pieces[i]==$this_val){
//remove value from the buffer
pieces.splice(i);
}
$('#buffer').text(pieces.join('/')+'/');
}
}else{
//add the value to the query string
$('#buffer').append($(this).val()+'/');
}
});
//on form submit
$('#filterWrapper form').submit(function(){
var queryString='';
$.each($('form input:checkbox:checked'),function(){
queryString+=$(this).val()+'/';
});
alert('this will get send over: '+queryString);
return false;//remove this in production
});
抱歉 HTML 损坏，编辑器不喜欢表单标签和输入标签
【讨论】：
$('.checkbox_class').change(function () {
let filter = $('.checkbox_class');
let types = [];
$.each(filter, function( index, input ) {
if(input.checked)
{
types[index] = input.value;
}
});
let typeQueryString = decodeURIComponent($.param({type:types}));
console.log(typeQueryString);
});
【讨论】：