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

【问题标题】：How to handle multiple checkboxes change event using jQuery and AJAX?如何使用 jQuery 和 AJAX 处理多个复选框更改事件？
【发布时间】：2019-11-15 10:27:34
【问题描述】：

我有多个使用 PHP 生成的复选框，当复选框的值在 jQuery 中使用 AJAX 更改时，我正在尝试更新每个项目

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

现在我只想在更改时获取每个复选框，而不是一次全部！

发生的情况是它只获取复选框的第一个值，而不是其余的值

【问题讨论】：

您所有的复选框是否都具有相同的 ID (visible)？那将是无效的 HTML，jQuery 只会找到第一个。为此使用一个类

标签： php jquery ajax checkbox

【解决方案1】：

具有相同 ID 的多个元素是无效的 HTML，jQuery 只会选择具有$("#id") 的第一个元素。 See this thread for more info.
将选择器替换为 HTML 中的类，并在 Javascript 中使用 $(this) 访问唯一项。

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

【讨论】：