Несколько флажков со странным поведением Ajax

Question

У меня есть форма с множеством флажков, и страница PHP вызывается для обновления базы данных при каждом нажатии.

HTML

<form>
   <input type="checkbox" name="status1" id="event_status1" value="1" >
   <input type="checkbox" name="status2" id="event_status2" value="1" >
   <input type="checkbox" name="status3" id="event_status3" value="1" >
</form>

JQuery

  $('input:checkbox').change(function(e) {
     e.preventDefault();
     var isChecked = $("input:checkbox").is(":checked") ? 1:0; 
     $.ajax({
           type: 'POST',
           url: "admin-ajax.php",
           data: { event_status:$("input:checkbox").attr("id"), status:isChecked},
           success: function (response) {
              console.log(response);
           }
     });        
  });

Это работает хорошо, когда я проверяю / снимаю флажок с каждого флажка индивидуально.

Если я установлю 3 флажка, последний из проверенных мной параметров не будет иметь статус «0», если я сниму флажок, но всегда будет отправлять «1».

Answer 1

Я думаю, что проблема связана с третьей строкой:

 var isChecked = $("input:checkbox").is(":checked") ? 1:0; 

Вы используете селектор jquery $('input:checkbox'), который будет возвращать случайный флажок из всей структуры HTML DOM, это не вернет ваш отмеченный флажок, поэтому решениеэто использовать this.

Таким образом, код будет выглядеть так:

 $('input:checkbox').change(function(e) {
     e.preventDefault();
     var isChecked = $(this).is(":checked") ? 1:0; 
     var eleId = $("this").attr("id");
     $.ajax({
           type: 'POST',
           url: "admin-ajax.php",
           data: { event_status:eleId, status:isChecked},
           success: function (response) {
              console.log(response);
           }
     });        
  });

Answer 2

Вы должны использовать input dom, событие изменения которого вызвано не этим

$("input:checkbox")

Вы должны сделать что-то вроде этого:

$('input:checkbox').change(function (e) {
    e.preventDefault();
    var self = $(this);
    var isChecked = self.is(":checked") ? 1 : 0;
    $.ajax({
        type:    'POST',
        url:     "admin-ajax.php",
        data:    {event_status: self.attr("id"), status: isChecked},
        success: function (response) {
            console.log(response);
        }
    });
});

---

Есливы хотите подготовить объект ajax data вне $.ajax, вы можете сделать это следующим образом:

$('input:checkbox').change(function (e) {
    e.preventDefault();
    var data = {event_status: $(this).attr("id"), status: +$(this).is(":checked")};
    $.ajax({
        type:    'POST',
        url:     "admin-ajax.php",
        data:    data,
        success: function (response) {
            console.log(response);
        }
    });
});

Примечание: + в +$(this).is(":checked") преобразует логическое значение в число, false становится 0,и true становится 1