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

您必须使用触发变更事件的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);
        }
    });
});

如果要在data之外准备ajax $.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")将布尔值转换为Number，false变为0，而true变为1

Answer 2

我认为问题出在第三行：

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

具有Ajax异常行为的多个复选框

2 个答案: