Почему checkbox проверяется только для текущей страницы Я нахожусь

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> 

А вот как эта таблица выглядит:

Как видите, таблица содержит столбец флажка. Когда я проверяю заголовок CheckBox столбца всех CheckBox должен быть 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; 
      } 
     } 
    } 

А вот как это выглядит после того, как я проверить заголовок флажка:

Но когда я выбираю вторую страницу в пейджинге, получится, что флажки не установлены:

i.e флажки будут работать только на текущей странице разбивки на страницы.

Вопрос: почему не все флажки выбраны? Мне нужно проверить или снять отметку со всех флажков, когда флажок в заголовке отмечен или снят, любая идея или примеры, как я могу реализовать ее в своем примере?

Заранее спасибо.

Answer 1

Использование на:

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

чем использовать() метод .На делегировать событие щелчка для будущих элементов, добавленных к DOM