使用jquery ajax mysql和php通过checkbox复制filtet数据

Question

I have a group of dynamic checkbox of location

<?php foreach($qry_2 as $v2) { ?>
    <li class="checkbox">
        <label>
            <input type="checkbox" class="i-check" id="locality" name="locality[]" value="<?php echo $v2['outlet_locality'] ?>"><?php echo $v2['outlet_locality'] ?>
            <small class="location"><?php echo '('.$v2['outletCount'].')' ?></small>
        </label>
    </li>
<?php } ?>

and I got aprox 10 input checkbox values I want to filter the content according to the checkbox(multiple select) using jQuery and send data to filter.php to retrive as json data

$('input#locality').change(function () {
    var locality = [];
    $(':checkbox:checked').each(function (i) {
        locality.push($(this).val());
    });

    $.post("php/filter.php", {name: locality}, function(data){

    });
});

when I checked the checkbox I got indivisual value not an array, so how can I get the array value of multiple checkbox checked to send to and retrive data from filter.php my filter.php

$qry_1 = array();

$checkbox1 = $_POST['name'];  
$chk = "";   
foreach($checkbox1 as $chk1)  
{  
    $chk .= $chk1.",";  
}
$sql_1 = "SELECT  p.id,p.outlet_id,p.offer_title,p.original_price,p.discount,p.discount_price,p.offer_image,p.offer_details,o.outlet_id,o.outlet_title,o.outlet_locality,o.segment_type FROM products as p,outlets as o WHERE p.outlet_id=o.outlet_id AND o.outlet_locality='$chk'"; 
$qry_1 = sel_qry($sql_1);
foreach($qry_1 as $v)
{
    $filterloc[] = array('title'=>$v['outlet_title'],'cat_id'=>$v['outlet_id']);
}
echo json_encode($filterloc);

i am getting null value do guide me

Answer 1

Try moving this

$.post("filter.php", { name: locality[i] }, function (data) {
  alert(data);
});

to outside of the each. ie:

$('input#locality').change(function () {
  var locality = [];
  $(':checkbox:checked').each(function (i) {
    locality.push($(this).val());
    alert(locality[i])
  });

  $.post("filter.php", { name: locality }, function (data) {
    alert(data);
  });
});

(Assuming your backend expects an array, of course)

Answer 2

Try this code.

HTML

<li class="checkbox">
   <label>
       <input type="checkbox" class="i-check" id="locality" name="locality[]" value="<?php echo $v2['outlet_locality'] ?>"><?php echo $v2['outlet_locality'] ?>
       <small class="location"><?php echo '('.$v2['outletCount'].')' ?></small>
   </label>
</li>

JS

$('input.i-check').change(function () {
    var locality = [];
      $(':checkbox:checked').each(function (i) {
            locality.push($(this).val());
      });

      $.post("jquery1.php", {name: locality}, function(data){

      });
});

Instead of id locality , used class i-check