douyi2798
2019-07-04 16:59
浏览 181

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duandian8251 2019-07-04 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);
          });
      });
    
    点赞 评论

相关推荐 更多相似问题