Question

我从列表中显示一个元素列表，我必须在每个元素前面显示一个复选框，然后删除所有选中的元素，我写了一个jquery代码来执行此操作，但它只删除了第一个检查的元素，如何删除所有已检查的项目

<button type="submit" class="btn fsc-btn-3" id="AllDelete">
    <i class=" fa fa-check"></i>
    <span>@Labels.Global_DeleteSelection</span>
</button>    
@foreach (var item in Model.FilesList)
{
    <tr>
        <td><input type="checkbox" name="checkFile" id="checkFile" value="@item.FileId" /></td> 
        <td>@item.ArrivalTime</td>
        <td>@Model.TraitementDate(item.FileId)</td>
        <td>@item.Name</td>

        <td>@item.FileType</td>
        <td>
            <label class="proj-label-1 proj-label-size-1 proj-status-5" title="@item.State">
                <i class="fa fa-check-circle"></i>
                <span>@item.State</span>
            </label>
        </td>
        <td >@item.NumAlertRecords</td>
        <td>@item.NumRejectedRecords</td>
        <td >@item.NumAcceptedRecords</td>
}

jQuery代码：

(function(jQuery) {
    jQuery(function() {
        jQuery('#AllDelete').click("click", function() {
            jQuery('input[type="checkbox"]').each(function() {
                if (jQuery(this).is(':checked')) {
                    alert(jQuery("#checkFile").val());
                    jQuery.ajax({
                        url: '@Url.Action("DeleteMultiCredit", "DeleteCredit")',
                        type: "POST",
                        dataType: "json",
                        data: { FileId: jQuery("#checkFile").val() },
                        success: function (data) { }
                    })
                }
            });
        });
    });
})(jQuery);

控制器：

[HttpPost]
public ActionResult DeleteMultiCredit(int FileId)
{
    DeleteCreditModel model = new DeleteCreditModel();
    model.Delete(FileId);
    return RedirectToAction("Index");
}

Answer 1

试试这个：首先你不能为所有复选框使用相同的id，所以要么为每个复选框生成唯一ID，要么删除id属性

@foreach (var item in Model.FilesList)
{
<tr>
<td><input type="checkbox" name="checkFile" value="@item.FileId" /></td> 


<td>@item.ArrivalTime</td>
<td>@Model.TraitementDate(item.FileId)</td>
<td>@item.Name</td>

<td>@item.FileType</td>
<td>
<label class="proj-label-1 proj-label-size-1 proj-status-5" title="@item.State">
<i class="fa fa-check-circle"></i>
<span>@item.State</span>
</label></td>
<td >@item.NumAlertRecords</td>
<td>@item.NumRejectedRecords</td>
<td >@item.NumAcceptedRecords</td>
}

现在使用$(this).val()获取每个复选框的值，而不是使用复选框ID来读取值

jQuery(function () {
    jQuery('#AllDelete').click("click", function () {

        //you can use :checked directly in selector, so if condition not required
        jQuery('input[type="checkbox"]:checked').each(function() {

           alert(jQuery(this).val());
           jQuery.ajax({
               url: '@Url.Action("DeleteMultiCredit", "DeleteCredit")',
               type: "POST",
               dataType: "json",
               data: { FileId: jQuery(this).val() },//read your value here
               success: function (data) {

               }
          });
        });

    });
})(jQuery);

Answer 2

使用jQuery（this）代替jQuery（＆＃34;＃checkFile＆＃34;）

就像这样：

(function(jQuery) {
    jQuery(function() {
        jQuery('#AllDelete').click("click", function() {
            jQuery('input[type="checkbox"]').each(function() {
                if (jQuery(this).is(':checked')) {
                    alert(jQuery(this).val());
                    jQuery.ajax({
                        url: '@Url.Action("DeleteMultiCredit", "DeleteCredit")',
                        type: "POST",
                        dataType: "json",
                        data: { FileId: jQuery(this).val() },
                        success: function (data) { }
                    })
                }
            });
        });
    });
})(jQuery);

Answer 3

尝试以下代码

jQuery(function () {
jQuery('#AllDelete').click(function () {

    jQuery('input[type="checkbox"]').each(function() {
            if(this.checked){
                alert(jQuery("#checkFile").val());
                jQuery.ajax({
                    url: '@Url.Action("DeleteMultiCredit", "DeleteCredit")',
                    type: "POST",
                    dataType: "json",
                    data: { FileId: jQuery(this).val() },
                    success: function (data) { }
                })
            }
        });
    });
});
})(jQuery);

删除列表中的所有选中元素

3 个答案: