Question

I’m looking for a bit of help ironing out a bug in a search form I’m working on.

I have a form of multiple checkboxes which submits via AJAX to PHP and returns a query string for use in deep-linking. The query string is used to check checkboxes on the page that appear in the query string.

The query string looks like this:

var returnedResults = #Size=35.5&Size=36&Colour=red&Material=leather

I have a form with a series of checkboxes like this:

<input type="checkbox" name="Size[]" id="35" value="35">
<input type="checkbox" name="Size[]" id="35.5" value="35.5">
<input type="checkbox" name="Size[]" id="36" value="36">
...
<input type="checkbox" name="Colour[]" id="red" value="red">
...

I am using jQuery’s each function to loop through the checkboxes and check them if they appear in the query string:

$('input').each(function(){
  if (returnedResults.indexOf($(this).val()) >= 0) {
   // check the box
  }
});

This works fine for the most part but appears to return true for Size=35 when Size=35.5 is the only thing in the query string. ie. the checkbox with value=35 is checked when returnedResults=#Size=35.5

Is this a quirk of indexOf when dealing with decimals or is there something I’m doing wrong?

Many thanks for your help in advance.

Answer 1

Try:

var returnedResults = "#Size=35.5&Size=36&Colour=red&Material=leather&Size=40.4";
var results = new Array();
results = returnedResults.split('&');
$.each(results, function(i) {
   var start = results[i].indexOf('=');
   results[i] = results[i].substr(start+1);
});
$('input').each(function(i){
    if ($.inArray($(this).val(), results) > -1) {
      $(this).attr("checked", "checked");
  }    
});

Fiddle: http://jsfiddle.net/alpacalips/7p3jJ/3/

What I did was parse the values from the query string using the .split and .substr methods. The values were then put into an array and then I used $.inArray() to check to see if the values exist in the array.