为什么只选中当前页面的复选框我在

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> 

这里是此表的外观：

正如你可以看到表格包含复选框列。当我检查复选框列 所有的复选框的标题必须selected.Here是实现它的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); 
}); 

不是使用。对（）方法来委托点击事件添加到DOM