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

How to call ajax function for each checkbox based on the checkbox state?

本文关键字：复选框 调用 ajax 函数 何根 状态      更新时间：2023-09-26

这是我下面的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();
    });

目录

<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>

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

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

查看控制台示例，所有开机自检均已正确发送。代码正在为所有 chekcbox 运行，但您的想法不同，因为您只能在警报中看到一条消息。不是吗？

您正在重新加载页面，而不是等待 for 中的所有操作。要完成的每个块。由于你有异步的 ajax 调用，你需要使用 jquery 承诺，以便在块中的所有操作完成后立即触发一次。这是你的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();
  });
});

相关文章：