爲什麼只選中當前頁面的複選框我在

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