How to handle multiple checkboxes change event using jQuery and 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

Do all your checkboxes have the same ID (`visible`)? That would be invalid HTML and jQuery would only find the first one. Use a class for this — Kryptur, Jul 04 '19 at 17:03

score 0 · Accepted Answer · answered Jul 04 '19 at 17:08

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);
      });
  });

How to handle multiple checkboxes change event using jQuery and AJAX?

1 Answers1