Почему флажки не снимаются, когда я зацикливаюсь и снимаю флажок с помощью 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/>

Также обратите внимание, что вы должны генерировать уникальные ID для каждого checkbox, чтобы избежать дублирования ID