Question

我正在结果页面上构建一个包含多个过滤器选项的搜索表单。

这是一个基本的搜索表单，结果显示在一个友好的网址中，例如：domain.com/resuts/country/age/type /

过滤器只是复选框，点击后，应该使用查询字符串重新加载页面，以识别已检查/未选中的内容。（没有提交，最好更新会在每个复选框点击时重建查询字符串。）

所以，例如，点击一些复选框，我们会在最后建立一个查询字符串，？例如：domain.com/resuts/england/20-29/female/场景=时髦＆安培;状态=单

有人可以指向我的jquery资源或代码片段，这可能有助于完成这项工作吗？

非常感谢，

伊恩。

Answer 1

当您传递键值对时，jQuery.get函数将自动处理创建和构建查询字符串：

http://docs.jquery.com/Ajax/jQuery.get

您可以将此选择器用于选中的复选框：

$('input:checkbox:checked')

Answer 2

如果您的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('&');

Answer 3

$('.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);

 });

Answer 4

这是你想要的吗？单击复选框时，它会向上显示所选值。当您提交表单时，它会在警报中显示相同的值

<div id="buffer" style="height:2em; border:1px solid black; margin-bottom:1em"></div>

form action =“＃”method =“get”＆gt; input type =“checkbox”id =“j”name =“state”value =“state”＆gt; state
input type =“checkbox”name =“city”value =“city”＆gt; city
input type =“checkbox”name =“type”value =“type”＆gt; type
输入类型=“提交”值=“点击我”＆gt; /形式＆GT;

    $().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损坏感到抱歉，编辑不喜欢表单标签和输入标签

使用jquery和checkboxes构建查询字符串

4 个答案: