如何根據複選框狀態爲每個複選框調用ajax函數？

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

我已經測試你的代碼在這裏： example
您可以一次只能顯示一個警告框。你應該收集所有的消息。
無需使用：

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

查看例控制檯，所有職位都正確地發送。 代碼正在運行所有chekcboxs，但您認爲不同，因爲您只能看到一條警報消息。不是嗎？

Answer 2

你重新加載頁面不是在等待您的for..each塊中的所有動作完成。因爲你有一個異步的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(); 
 
    }); 
 
});