Как обрабатывать несколько флажков изменения события, используя jQuery и AJAX?

Question

У меня есть несколько флажков, сгенерированных с помощью PHP, и я пытаюсь обновить каждый элемент, когда значение флажка изменяется с помощью AJAX в 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);
      });
  });
});

Теперь я хочу получать каждый флажок только при изменении, а не сразу!

Что происходит, так это то, что он получает только первое значение флажка, а не остальные

Answer 1

Наличие нескольких элементов с одинаковым идентификатором является недопустимым HTML, и jQuery выберет только первый элемент с $("#id"). См. Эту ветку для получения дополнительной информации .
Замените селектор классом в вашем HTML и получите доступ к уникальному элементу с помощью $(this) в вашем 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);
      });
  });