如何使用jQuery和AJAX处理多个复选框更改事件？

Question

I have multiple checkboxes generated using PHP, and i'm trying to update each item when the value of the checkbox is changed using AJAX in jQuery

<input type="checkbox" name="visible" id="visible" data-id="<?= $item['id'] ?>" <?= $item['visible']? 'checked' : ''; ?>>

(document).ready(function() {
  $('#visible').change(function() {
    $.post('../ajax/carousel.php',
      {
        'id'     : $('#visible').attr('data-id'),
        'visible' : $('#visible').is(':checked') ? 1 : 0
      },
      function(data, status) {
        alert(data);
      });
  });
});

Now i only want to get each checkbox when changed and not all at once!

What happens is that it only gets the first value of the checkbox and not the rest

Answer 1

Having multiple elements with the same ID is invalid HTML and jQuery will only select the first element with $("#id"). See this thread for more info.
Replace the selector with a class in your HTML and access the unique item with $(this) in your Javascript.

<input type="checkbox" class="visible-cb" data-id="<?= $item['id'] ?>" <?= $item['visible']? 'checked' : ''; ?>>

$('.visible-cb').change(function() {
    $.post('../ajax/carousel.php',
      {
        'id'     : $(this).data('id'),
        'visible' : $(this).is(':checked') ? 1 : 0
      },
      function(data, status) {
        alert(data);
      });
  });