使用jQuery循环取消复选框选中状态时为何仅首个生效？

你遇到的核心问题是HTML元素的ID必须唯一，但你在动态生成复选框时给所有复选框都用了同一个id="chkBoxSelected"。当你用$('#chkBoxSelected')选择元素时，jQuery只会匹配到页面上第一个拥有这个ID的元素，这就是为什么只有第一个复选框能取消选中的原因。

下面是具体的修复步骤：

1. 修复动态生成复选框的代码 #

把固定的id="chkBoxSelected"改成class（比如class="chkBoxSelected"），这样可以通过class选择器选中所有复选框，同时避免ID重复的问题。另外，你给生成的<tr>也用了固定ID，同样会导致重复，建议改成带索引的唯一ID，避免后续操作出问题。修改后的代码如下：

function fillServicesGrid() {
    var url = '@Url.Action("GetServices")';
    var data = '' 
    $.get(url, data, function (response) {
        $("#tbodytblServices").html("");
        $.each(response, function (i, val) {
            $("#tbodytblServices").append(
                $('<tr>').attr('id', 'trServiceRecord_' + i) // 改为唯一ID
                .append($('<td>').attr('id', "tdServiceID" + i).html(val.ServiceID))
                .append($('<td>').attr('id', "tdServiceName" + i).html(val.ServiceName))
                .append($('<td>').attr('id', "tdServicePrice" + i).html(val.ServicePrice))
                .append($('<input type="checkbox" class="selectColumn chkBoxSelected" />')) // 用class替代重复ID
            );
        });
    });
}

2. 修改取消复选框选中状态的代码 #

现在可以通过class选择器选中所有选中的复选框，直接取消它们的选中状态，去掉原来多余的过滤逻辑：

// 取消所有选中的目标复选框
$('.chkBoxSelected:checked').prop("checked", false);

3. 优化AJAX提交逻辑（可选但推荐） #

你当前在循环里逐个发送AJAX请求，若选中多行会触发多个请求。如果想等所有请求完成后再统一取消选中，可以用Promise.all来处理，避免提交未完成就取消选中的情况：

function selectService() {
    var ajaxPromises = [];
    $("#tblServices tr").filter(':has(:checkbox:checked)').each(function () {
        var url = '@Url.Action("CreateInvoice")';
        var data = { 
            fk_BookingID: $("#Booking_ID").val(), 
            fk_ServiceID: $("td:eq(0)", this).text() 
        };
        // 将每个AJAX请求包装为Promise存入数组
        var promise = $.post(url, data).done(function (response) {
            if (response.ReturnStatusJSON === true) {
                swal("Done", response.ReturnMessageJSON, "success");
            } else {
                swal("Sorry !", response.ReturnMessageJSON, "error");
            }
        });
        ajaxPromises.push(promise);
    });

    // 所有请求完成后统一取消选中
    Promise.all(ajaxPromises).then(function() {
        $('.chkBoxSelected:checked').prop("checked", false);
    });
}

内容的提问来源于stack exchange，提问作者user9677867