You can extract the data representing what has been selected like this:
$('#getSelection').click(function(){
var selection = $('.panel').map(function(_,e){
var $e = $(e);
return {
panelId: $e.data('id'),
selectedFacets: $e.find('input:checkbox:checked').map( function(_,i){
return i.id;
}).get()
};
}).get();
console.log(selection)
});
That assumes a button with the id getSelection
, and this code creates an array of objects with the following:
[Object { panelId="size", selectedFacets=[1]}, Object { panelId="base_colour", selectedFacets=[1]}, Object { panelId="brand", selectedFacets=[1]}]
In that example, each selectedFacets
property is an array of the id
attribute from the checkboxes.
Live example: http://jsfiddle.net/sk7pqf5c/4/
From there you just need to turn that array in to a string and pass it wherever you like on a quesrystring. Going the other way, you need to parse that string, turn it back into an array similar to what is produced above, and use it to pre-select the checkboxes on screen.