javascript - 为什么仅针对我所在的当前页面选中复选框

Question

我实现了带有分页的表格。

这里是创建表的代码:

<table id="ContactsTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>
                @Html.CheckBox("chkBoxAllEmails", new { onclick = "SelectAllEmails(this);" })
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Email
            </th>
        </tr>
    </thead>
    @foreach (UserContact item in ViewBag.Contacts)
    { 
        <tr>
            <td>
                <input id = "@(("chkbox" + index++).ToString())"  name="chboxEmail"     type="checkbox"  value = "@item.email" onclick="SelectEmail(this); " />
            </td>
            <td>
                @item.firstName
            </td>
            <td>
                @item.lastName
            </td>
            <td>
                @item.email
            </td>
        </tr>
    }
</table>

以下是在表中创建分页的代码:

   <script>
        $(document).ready(function () {
            $('#ContactsTable').dataTable();
        });
    </script>

该表的外观如下:

如您所见，表格包含复选框列。当我检查复选框列的标题时 所有复选框都必须被选中。下面是实现它的 JS 代码:

    function SelectAllEmails(chboxSelectAllElements) {

        var chboxEmailsArray = document.getElementsByName("chboxEmail");        
        if (chboxSelectAllElements.checked) {

            for (var i = 0; i < chboxEmailsArray.length; i++) {
                chboxEmailsArray[i].checked = true;
            }
        }

        else {

            for (var i = 0; i < chboxEmailsArray.length; i++) {
                chboxEmailsArray[i].checked = false;
            }
        }
    }

这是我检查复选框标题后的样子:

但是当我在分页中选择第二页时，结果发现复选框未选中:

即复选框仅适用于当前分页页面。

我的问题是为什么没有选中所有复选框？ 当标题中的复选框选中或取消选中时，我需要选中或取消选中所有复选框，有什么想法或示例如何在我的示例中实现它？

提前谢谢您。

Answer 1

使用于:

$(document).on('change', 'input[name="chboxEmail"]', function(e) {
    $('input:checkbox').not(this).prop('checked', this.checked);
});

然后使用 .on() 方法将点击事件委托(delegate)给将来添加到 DOM 的元素