Send checkbox values in Ajax

The following code is my original code. In the code, I tried to post value of an input for each checkbox which is checked.

      <tbody class="myFormSaldo">
          <tr>
            <td> <input name="checkbox['.$i.']" type="checkbox" value="'.$i.'" id="chb'.$ref.'" onchange="enableList(this);" class="chb_group" /> </td>

            <td> <input name="items['.$i.']" type="text" readonly value="'.$obj->items.'" /> </td>

            <td> <input name="size['.$i.']" type="text" readonly value="'.$obj->size.'Kg" /> </td>

            <td> <input name="quantity['.$i.']"  type="text" readonly value="'.$obj->myquantity.'" /> </td>

            <td><a href="member-estock-saldo-history.php?product='.str_replace("+","_",$obj->items).'&size='.$obj->size.'">Detail</a></td>';


        if($_SERVER["REQUEST_METHOD"] == "POST") {
            foreach($_POST['checkbox'] as $i) {

                            $product_name=$_POST['items'][$i];
                            $product_size=$_POST['size'][$i];

The code above is working fine. It post the value of each inputs for each checkbox which were checked. For example; if there were three checkedbox which were checked and the form was submited, then it would post three arrays (3 loop) of : $product_name,$product_size,etc..

What I want now is to use Ajax. Like this:

    var product_name= document.getElementById('product_name').value;
    var product_size = document.getElementById('product_size').value;
    $.ajax(
    {
        type: "POST",
        url: "../actions/selectReferenceOrder.php",
        data: product_name='+product_name+'&product_size ='+product_size ,
        cache: false,
        success:function(html)
        {
            document.getElementById('outputReference').innerHTML = html;
        }
    });

But it doesn't count or find the checkbox

So my question now is how to do the same as the php do with foreach($_POST['checkbox'] as $i) in ajax?

I am just a beginner in all of these things.

Thank you for any help.