当我使用jquery循环和取消选中复选框时，为什么不取消选中复选框？

I have created a table dynamically using jquery and it has a checkbox chkBoxSelected

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

I am looping through only rows which are checked. After posting them via ajax I want to uncheck the boxes but it only does the first one and not others.

我只循环检查行。在通过ajax发布它们之后我想取消选中这些框但它只执行第一个而不是其他框。

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

Full Code:

完整代码：

Table:

表：

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

Table generation code:

表生成代码：

 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" />')));

                });

            });



        }

Data submission:

数据提交：

 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");
                }


            });




        });

1 个解决方案

#1

Select checkboxes with class not id. #chkBoxSelected is an ID and it's unique and used for one, so should use class for select all checkboxes.

选择类不是id的复选框。 #chkBoxSelected是一个ID，它是唯一的，用于一个，所以应该使用class来选择所有复选框。

$('.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/>

And also note that, you should generate unique ID for each checkbox to avoid duplicate ID

另请注意，您应为每个复选框生成唯一ID，以避免重复ID

#1