Как отправить AJAX-запрос при изменении состояния чекбоксов?

Добрый день. Есть набор чекбоксов, при изменении состояния которых отправляется AJAX-запрос. Проблема в том, что если уже выбран один чекбокс и затем выбрать ещё один, в запрос отправляются параметры всех выбранных чекбоксов, а нужно, чтобы отправлялся только параметр лишь что выбранного чекбокса. То есть: выбираю один чекбокс — приходит ответ и выводится в соответствующий div; при выборе следующего чекбокса должен прийти ответ только для него и выводиться в его div; сейчас же при выборе второго отправляется массив вида ["id1","id2"].
  • 7 апреля 2026 г. 13:00
Ответы на вопрос 2
Кратко: при обработке события change берите не все чекбоксы формы, а только элемент, который вызвал событие (event.target или this) и отправляйте его значение. Не используйте serialize() на всей форме, если хотите отправить только один чекбокс.

Несколько примеров.

1) jQuery — отправлять только изменившийся чекбокс, только при установке (или и для снятия):
```js
// вешаем обработчик на все чекбоксы с классом .my-checkbox
$(document).on('change', '.my-checkbox', function () {
  var $cb = $(this);               // this — изменившийся чекбокс
  var id = $cb.val();              // значение (id)
  var checked = $cb.is(':checked'); // true/false

  // если нужно отправлять только при установке:
  if (!checked) return;

  $.ajax({
    url: '/your-url',
    method: 'POST',
    data: { id: id, checked: checked },
    success: function (response) {
      // обновляем нужный div, допустим у него id = "div-<id>"
      $('#div-' + id).html(response);
    }
  });
});
```

2) Чистый JS (fetch):
```js
document.addEventListener('change', function (e) {
  if (!e.target.matches('.my-checkbox')) return;

  var cb = e.target;
  var id = cb.value;
  var checked = cb.checked;

  if (!checked) return; // если нужен только при выборе

  fetch('/your-url', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ id: id, checked: checked })
  })
  .then(res => res.text())
  .then(html => {
    document.getElementById('div-' + id).innerHTML = html;
  })
  .catch(console.error);
});
```

3) Если вы раньше делали что-то вроде $('form').serialize() или отправляли все отмеченные чекбоксы — это и даёт массив ["id1","id2"]. Решение: не сериализовать форму, а сформировать объект/FormData с единственным полем:
```js
var formData = new FormData();
formData.append('id', id);
formData.append('checked', checked ? 1 : 0);

fetch('/your-url', { method: 'POST', body: formData });
```

Дополнительно:
- Используйте data-атрибут (data-target) или соглашение по id, чтобы точно знать, какой див обновить для конкретного чекбокса.
- Учтите, что change срабатывает и при снятии галочки — если вам нужно реагировать только на установку, проверяйте checked.
- В обработчике this / event.target — именно изменившийся элемент, поэтому нет необходимости собирать все checked inputs.

Если покажете ваш текущий код (HTML чекбоксов и JS-обработчик), подскажу точную правку.
Ну так если вам нужен только изменившийся чекбокс, то зачем вы проверяете все? <br/> each в вашей задаче абсолютно не нужен.
Похожие вопросы