为什么复选框只检查我当前的页面

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（）方法将click事件委托给添加到DOM的未来元素