jQuery ajax filters form and URL hash

Question

I am having the following piece of code:

<label class='checkbox'><input type='checkbox'  class='custom_filter' name='kleuren' value='Blauw' data-taxonomy='kleuren' data-category='Blauw'>  Blauw (4) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='kleuren' value='Rood' data-taxonomy='kleuren' data-category='Rood'>  Rood (2) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='kleuren' value='Wit' data-taxonomy='kleuren' data-category='Wit'>  Wit (2) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='kleuren' value='Zwart' data-taxonomy='kleuren' data-category='Zwart'>  Zwart (1) </label> 
<label>provincies</label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Drenthe' data-taxonomy='provincies' data-category='Drenthe'>  Drenthe (6) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Flevoland' data-taxonomy='provincies' data-category='Flevoland'>  Flevoland (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Friesland' data-taxonomy='provincies' data-category='Friesland'>  Friesland (6) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Groningen' data-taxonomy='provincies' data-category='Groningen'>  Groningen (5) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Limburg' data-taxonomy='provincies' data-category='Limburg'>  Limburg (2) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Noord-Brabant' data-taxonomy='provincies' data-category='Noord-Brabant'>  Noord-Brabant (2) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Noord-Holland' data-taxonomy='provincies' data-category='Noord-Holland'>  Noord-Holland (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Overijssel' data-taxonomy='provincies' data-category='Overijssel'>  Overijssel (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Utrecht' data-taxonomy='provincies' data-category='Utrecht'>  Utrecht (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Zeeland' data-taxonomy='provincies' data-category='Zeeland'>  Zeeland (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Zuid-Holland' data-taxonomy='provincies' data-category='Zuid-Holland'>  Zuid-Holland (0) </label> 
<label>stijlen</label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Amerikaans' data-taxonomy='stijlen' data-category='Amerikaans'>  Amerikaans (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Cabriolet' data-taxonomy='stijlen' data-category='Cabriolet'>  Cabriolet (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Duits' data-taxonomy='stijlen' data-category='Duits'>  Duits (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Engels' data-taxonomy='stijlen' data-category='Engels'>  Engels (8) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Frans' data-taxonomy='stijlen' data-category='Frans'>  Frans (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Italiaans' data-taxonomy='stijlen' data-category='Italiaans'>  Italiaans (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Klassiek' data-taxonomy='stijlen' data-category='Klassiek'>  Klassiek (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Luxe' data-taxonomy='stijlen' data-category='Luxe'>  Luxe (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Modern' data-taxonomy='stijlen' data-category='Modern'>  Modern (0) </label> 
<label>merken</label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Austin' data-taxonomy='merken' data-category='Austin'>  Austin (7) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Bentley' data-taxonomy='merken' data-category='Bentley'>  Bentley (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='BMW' data-taxonomy='merken' data-category='BMW'>  BMW (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Cadillac' data-taxonomy='merken' data-category='Cadillac'>  Cadillac (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Chevrolet' data-taxonomy='merken' data-category='Chevrolet'>  Chevrolet (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Chrysler' data-taxonomy='merken' data-category='Chrysler'>  Chrysler (0) </label> 

This represents the form that is used to apply filters to a database query. After each filter is clicked (checkbox is set) the URL HASH must be refreshed and look like the following:

     #provincies=Drehte,Noord-Brabant&kleuren=Wit,Rood

That is an example if the selected provincies and colors are checked.

I have tried to do

     var filters = jQuery("#CUSTOM_AJAX_FILTERS").serializeArray();

where filters var will get all the data from the form, as array, but it returns an empty array all the time. Also I have tried to get the data-taxonomy and data-category (Where Taxonomy = category; & category = filter ) and get the url hash with window.location.hash and split everything up, append the new data or delete, etc. But that is not a good choice.
Please let me know if there is any other solution to easily build up the url hash with the checked checkboxes using ajax / without refreshing the page.

Thanks!

Answer 1

try jquery map and join.

var CUSTOM_AJAX_FILTERS = $("input:checkbox:checked.custom_filter").map(function(){
    return $(this).val();
}).get().join(",");