Question

下面是我的jquery函数。如果我选中两个复选框，取消选中这两个复选框，或选中一个复选框并取消选中另一个复选框，它只会输入已编辑的最后一个复选框的方法。即删除/添加

Jquery的

$('.delete-numbers').click(function () {
        $('.number-chkbox').each(function () {   
            if (this.checked) {
                $(this).attr('checked', true);
                alert($(this).val() + " " + this.checked + "I GOT INNNN ADDDDD");
                $.ajax({
                    url: '/PhoneBook/AddNumber',
                    data: {
                        Number: $(this).val(),
                        Name: name,
                        PhoneId: PhoneId
                    },
                    type: "POST",
                    dataType: "html",
                    cache: false
                });
            } else {
                $(this).removeAttr('checked');
                alert($(this).val() + " " + this.checked + "I GOT INNNN REMOVE");
                $.ajax({
                    url: '/PhoneBook/AddNumber',
                    data: {
                        Number: $(this).val(),
                        Name: name,
                        PhoneId: PhoneId
                    },
                    type: "POST",
                    dataType: "html",
                    cache: false
                });
            }
        })
        location.reload();
    });

HTML

<div class="modal-body form-group">
                @foreach (var item in Model.PhoneBook.OrderBy(a => a.Number))
                {
                    if (Model.AvailableNumbers.Any())
                    {
                        if (Model.AvailableNumbers.Where(a => a.Number== item.Number).Count() != 0)
                        {
                            <input class="number-chkbox number" type="checkbox" checked="checked" name="@item.Number_Description" value="@item.Number">
                        }
                        else
                        {
                            <input class="number-chkbox number" type="checkbox" name="@item.Number_Description" value="@item.Number">
                        }
                        <label class="non-bold">@String.Format(" {0} - {1}", @item.Number, @item.Number_Description)</label>
                        <br />
                    }
                    else
                    {
                        <input class="number-chkbox number" type="checkbox" name="@item.Number_Description" value="@item.Number">
                        <label class="non-bold">@String.Format(" {0} - {1}", @item.Number, @item.Number_Description)</label>
                        <br />
                    }
                }
            </div>
<div class="modal-footer">
                    <button type="submit" class="btn btn-danger delete-numbers" data-dismiss="modal">Yes</button>
                    <button type="button" class="btn btn-default cancel-number">No</button>
                </div>

Answer 1

您正在重新加载页面，而不是等待for..each块中的所有操作完成。由于您具有异步的ajax调用，因此需要使用jquery promise，以便在块中的所有操作完成后立即触发。这是您的javascript的修改版本。

$('.delete-numbers').click(function() {
  $('.number-chkbox').each(function() {
    if (this.checked) {
      $(this).attr('checked', true);
      alert($(this).val() + " " + this.checked + "I GOT INNNN ADDDDD");
      $.ajax({
        url: '/PhoneBook/AddNumber',
        data: {
          Number: $(this).val(),
          Name: name,
          PhoneId: PhoneId
        },
        type: "POST",
        dataType: "html",
        cache: false
      });
    } else {
      $(this).removeAttr('checked');
      alert($(this).val() + " " + this.checked + "I GOT INNNN REMOVE");
      $.ajax({
        url: '/PhoneBook/AddNumber',
        data: {
          Number: $(this).val(),
          Name: name,
          PhoneId: PhoneId
        },
        type: "POST",
        dataType: "html",
        cache: false
      });
    }
  }).promise().done(function() {
    location.reload();
  });
});

Answer 2

我在这里测试了你的代码： example
您一次只能显示一个警告框。你应该收集所有消息。
无需使用：

.promise().done(function() {
   location.reload();
});

在示例中查看控制台，所有POST都正确发送。代码正在为所有chekcbox运行，但您认为不同，因为您只能在警报中看到一条消息。不是吗？

如何根据复选框状态为每个复选框调用ajax函数？

2 个答案: