javascript - 当我循环并使用 jquery 取消选中它们时，为什么复选框没有被取消选中？

Question

我使用 jquery 动态创建了一个表，它有一个复选框chkBoxSelected

我只遍历选中的行。通过 ajax 发布它们后，我想取消选中这些框，但它只选中第一个，而不选中其他框。

 $('#chkBoxSelected').prop("checked", false).filter(':has(:checkbox:checked)');

完整代码:

表:

<table id="tblServices" class="table table-responsive ">
      <thead class="table-header">
                                <tr>
                                    <th>S.No</th>
                                    <th>Service Name</th>
                                    <th>Service Price</th>

                                </tr>
                            </thead>
                            <tbody id="tbodytblServices" class="tableBody"></tbody>

                        </table>

表格生成代码:

 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').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" id="chkBoxSelected" />')));

                });

            });



        }

数据提交:

 function selectService() {

        var i = 0;

        $("#tblServices tr").filter(':has(:checkbox:checked)').each(function () {

            i = 1; // to check if the looping has been done or not

            var url = '@Url.Action("CreateInvoice")';
            var data = { fk_BookingID: $("#Booking_ID").val(), fk_ServiceID: $("td:eq(0)", this).text() }

            $.post(url, data, function (response)
            {
                if (response.ReturnStatusJSON === true) {                       

                    swal("Done", response.ReturnMessageJSON, "success");
                }
                else
                {
                    swal("Sorry !", response.ReturnMessageJSON, "error");
                }


            });




        });

Answer 1

选择 checkboxes class 而不是 id。 #chkBoxSelected 是一个 ID，它是唯一的并且只用于一个，因此应该使用类来选择所有复选框。

$('.selectColumn').prop("checked", false).filter(':has(:checkbox:checked)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="selectColumn" checked/>
<input type="checkbox" class="selectColumn" checked/>
<input type="checkbox" class="selectColumn" checked/>
<input type="checkbox" class="selectColumn" checked/>

还要注意，您应该为每个 checkbox 生成唯一的 ID 以避免重复的 ID