如何使用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
答
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);
});
});