Javascript 为什么只选中当前页面上的复选框

我用分页实现表

下面是创建表的代码：

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

@CheckBox（“chkboxalemails”，new{onclick=“SelectAllEmails（this）；”}）
名字
姓
电子邮件
@foreach（ViewBag.Contacts中的UserContact项）
{ 
@item.firstName
@item.lastName
@item.email
}

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

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

$（文档）.ready（函数（）{
$（'#ContactsTable'）。数据表（）；
});

下面是这张桌子的外观：

正如您所看到的，表包含复选框列。当我选中复选框列的标题时 必须选中所有复选框。以下是实现该复选框的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;
            }
        }
    }

function SelectAllEmails（chboxSelectAllElements）{
var chboxEmailsArray=document.getElementsByName（“chboxEmail”）；
如果（chboxSelectAllegements.checked）{
对于（var i=0；i

下面是我选中复选框标题后的外观：

但是，当我在分页中选择第二页时，发现复选框没有选中：

i、 e复选框仅在当前分页页上起作用

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

先谢谢你

用于：

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

---

而不是使用.on（）方法将单击事件委托给添加到DOM的未来元素，请提供更详细的示例？