Ajax call to php script sending values from multiple checkbox form

The method you choose is to some degree based on how you evaluate 'best'. In this case, I'd use three major criteria:

1. Low bandwidth
2. Clear code (semantically correct and easily understandable)
3. Easy code (code that is easy to write, debug and maintain)

Given your second code sample, it seems apparent that you're using jQuery. The first thing that I would do is replace your AJAX method with a call to $.get() or $.ajax(). This will simplify your code and make it easier to maintain.

The next thing I'd do is modify things to use the checked selector, which will streamline the process of getting the list of checked values. Something like this:

var checkedValue = $("input[name='size[]']:checked").map(function() {
    return Number(this.value);
}).get();

In order for this to work, you'd need to set the value property of your <input> tag. Something like this:

<form>
  <input type="checkbox" name="size[]" value="1"><label class="checkboxvalue">size 1</label>
  <input type="checkbox" name="size[]" value="2"><label class="checkboxvalue">size 2</label>
  <input type="checkbox" name="size[]" value="3"><label class="checkboxvalue">size 3</label>
  .
  .
  .
  <input type="checkbox" name="size[]" value="20"><label class="checkboxvalue">size 20</label>
</form>

This will produce an array containing the values of the checked boxes. For example, if sizes 1, 5, 7, and 20 were checked you would get [1,5,7,20].

Next, for sending it to PHP you basically have two options: CSV or JSON. Since the data you're working with is so simple, there isn't really much reason to use one over the other, so I'll show how to do both!

CSV JS:

var sizeList = $("input[name='size[]']:checked").map(function() {
    return Number(this.value);
}).get().join(",");

$.get("filter.php", {
        'sizeList': sizeList // I'm averse to any non-alphanumeric characters in URLs; you could use size[] if you prefer
    }, function(responseData) {
        $("#main").html(responseData);
    }
);

CSV PHP:

if(isset($_REQUEST['sizeList'])) {
    $sizes = explode(",", $_REQUEST['sizeList']);
} else {
    // handle error
}

JSON JS:

var size = $("input[name='size[]']:checked").map(function() {
    return Number(this.value);
}).get();

var sizeList = JSON.stringify(sizes);

$.get("filter.php", {
        'sizeList': sizeList // I'm averse to any non-alphanumeric characters in URLs; you could use size[] if you prefer
    }, function(responseData) {
        $("#main").html(responseData);
    }
);

JSON PHP:

if(isset($_REQUEST['sizeList'])) {
    $sizes = json_decode($_REQUEST['sizeList']);
} else {
    // handle error
}

My personal recommendation is to use CSV unless you anticipate the format of your data changing to be more complex than a simple list of numbers. CSV is great for simple tabular data, but not for more complex formats. Meanwhile, JSON is (almost) overkill for a simple numerical list, but really shines if you want to transmit complex data objects.

EDIT: Updated method. It appears that .val() does not return an array when there are multiple elements returned by the selector. See this fiddle for an example. I've used the method suggested by Arash in the comments.