选择所有页面中的所有复选框

Question

我在 ASP.NET MVC 中创建了一个包含复选框的表。您可以将此表视为 。我已经实现了一个脚本，允许在选择上面的复选框时自动检查复选框。不过这个功能只在page1有效，在其他页面无效。
有没有办法编写代码，以便在所有页面中选中所有复选框？
在我的代码中，我通过 challflag 函数来工作。
听到我的代码：

我的代码（表格）：

<form>    
                <table class="gridtable" id="example">
                    <thead>
                        ...
                    </thead>
                    <tfoot>
                        <tr>
                            <th>
                                <input class="rowCheckbox" type="checkbox" id="selectAll" style="margin-right: 5px; width: auto;" value="@select" onchange="challflag(this)" />
                                <label for="selectAll" id="myDiv">انتخاب همه</label>
                            </th>
                           ....
                        </tr>
                    </tfoot>
                    <tbody>
                        @if (selectedCourseId != null)
                        {
                            foreach (var item in Model)
                            {
                                if (item.CourseNumber == select)
                                {
                                    <tr>
                                        <td class="d1">
                                            <input type="checkbox" class="rowCheckbox" name="@item.CourseNumber" value="@item.Id" @(item.RegisterSituation ? "checked" : "") onchange="chflag(this)" />
                                        </td>
                                        <td>@item.OstadName</td>
                                        <td>@item.OstadFamily</td>
                                        <td>@item.EmployName</td>
                                        <td>@item.AcademicRank</td>
                                        <td>@item.CollegeName</td>
                                    </tr>
                                }
                            }
                        }


                    </tbody>

                </table>
</form>

我的脚本：

 <script>
     function challflag(checkbox) {
         var flag = checkbox.checked;
         var chcn = checkbox.value;

         // Check or uncheck all checkboxes in the DataTable
         $(checkbox).closest('table').find('input.rowCheckbox').prop('checked', flag);

         // Rest of your code

         $.ajax({
             url: "/Admin/OstadCourses/CheckboxAll",
             type: "POST",
             data: { chcn, flag },
             error: function () {
                 alert("Error!");
             }
         });
     }
 </script>

其他脚本：

 <script>
     $(document).ready(function () {
         $('#example').DataTable();
     });
 </script>
 <script src="~/Scripts/jquery.dataTables.min.js"></script>
 <script src="~/Scripts/jquery-3.7.0.js"></script>


 <script>
     new DataTable('#example', {
         initComplete: function () {
             this.api()
                 .columns()
                 .every(function (index) {
                     let column = this;
                     let title = column.footer().textContent;

                     if (index === 0) {
                         // Skip the first column (index 0)
                         return;
                     }

                     // Create input element
                     let input = document.createElement('input');
                     input.placeholder = title;
                     column.footer().replaceChildren(input);
                     input.addEventListener('keyup', () => {
                         if (column.search() !== input.value) {
                             column.search(input.value).draw();
                         }
                     });
                 });
         }
     });
 </script>

Answer 1

您正在使用 DataTables 显示带有复选框的表格，并且您已经实现了一个脚本，如果我是对的，则在单击主复选框时检查/取消选中当前页面上的所有复选框！？

要选中/取消选中所有页面上的所有复选框，您需要在服务器端处理此问题，当单击主/主/父复选框时，您应该向服务器发送 AJAX 请求以更新所有复选框的状态

我尝试修改你的代码

    var flag = checkbox.checked;
    var chcn = checkbox.value;

    // Sending an AJAX request to the server to update checkbox status
    $.ajax({
        url: "/Admin/OstadCourses/CheckboxAll",
        type: "POST",
        data: { chcn: chcn, flag: flag },
        success: function () {
            $(checkbox).closest('table').find('input.rowCheckbox').prop('checked', flag);
        },
        error: function () {
            alert("Error!");
        }
    });
}```

Note : in your controller, handle AJAX request and update the status of all checkboxes and you need to iterate through all the items on all pages and update their checkbox status