построение строки запроса с jquery и флажками

Question

Я создаю форму поиска с несколькими параметрами фильтра на странице результатов.

Это базовая форма поиска, результаты отображаются в дружественном URL-адресе, например: 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

Это то, что вы ищете? Когда вы нажимаете флажки, он показывает выбранные значения вверху. когда вы отправляете форму, она показывает вам то же значение в предупреждении

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

form action = "#" method = "get"> input type = "checkbox" id = "j" name = "state" value = "state"> state
input type = "checkbox" name = "city" value = "city"> city
input type = "checkbox" name = "type" value = "type"> type
input type = "submit" value = "click me"> / Форма>

    $().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, редактору не нравятся теги форм и теги ввода