javascript复选框检查了所有项目和所有页面

Question

我需要帮助!我只想检查第一页的表头复选框，但对于我的编码，它适用于我拥有的所有页面。有没有办法让javascript只检查我当前的页面？我使用一些函数来检查项目，其他函数用于分页。

function checkItems(checkHeader) {
            var checker = document.getElementsByName('check-body');
            if (checkHeader.checked)
            {
                for (var i = 0; i < checker.length; i++)
                {
                    checker[i].checked = true;
                }
            }
            else
            {
                for (var i = 0; i < checker.length; i++)
                {
                    checker[i].checked = false;
                }
            }
        }
        
        

th{
  padding-right:20px;
}
.table-bordered {
        border: 1px solid #357ebd;
    }
    .table thead > tr > th {
        vertical-align: middle!important;
    }
    .table thead > tr > th,
    .table tbody > tr > th,
    .table tfoot > tr > th,
    .table thead > tr > td,
    .table tbody > tr > td,
    .table tfoot > tr > td {
        padding: 0 5px !important;
        vertical-align: middle;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td td:last-child {
        border: 1px solid #357ebd;
    }
    .table {
        margin-bottom: 0!important; 
    }
    th {
        color: #ffffff;
        background-color: #428bca;
        border-color: #357ebd;
    }
    td:last-child {
        text-align: center!important;
    }
    .form-control{
        padding: 0 20px!important;
    }
    .text-employee-list {
        padding-left: 0 !important;
    }
    th:hover {
        cursor: pointer;
        text-decoration: underline;
    }
    .div-employee-list > form {
        padding-left: 0 !important;
        margin-bottom: 15px;
    }
    .pg-normal {
        color: black;
        font-weight: normal;
        text-decoration: none;
        cursor: pointer;
        padding: 6px 12px;
        border: 1px solid #ddd;
        line-height: 1.42857143;
    }
    .pg-selected {
        color: white;
        font-weight: bold;
        text-decoration: underline;
        cursor: pointer;
        background-color: #337ab7;
        border-color: #337ab7;
        padding: 7px 12px;
        line-height: 1.42857143;
    }
    .pg-first {
        margin-left: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .pg-last {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    #pageNavPosition {
        line-height: 2.5;
    }
    select.selectpicker {
        border: 1px solid #cccccc;
        padding: 0 10px;
        height: 34px;
        border-radius: 4px;
    }
    .checkbox {
        margin-top: 5px;
    }
    #employee-list {
        height: 36px;
        margin-bottom: 5px;
    }
    #search-form {
        padding-right: 0;
        padding-left: 5px;
        margin: 0;
    }
    .caret {
        border-top: 4px solid white;
    }
    ul{
      list-style: none;
      display: inline-block;
      float: right;
      margin: 0;
      padding-left: 0;
    }
    ul li.left{
      float: left;
      padding: 0 10px;
      border: 1px solid grey;
      border-radius: 3px;
      padding-bottom: 5px;
    }
    ul li.right{
      float: right;
      padding: 0 10px;
      border: 1px solid grey;
      border-radius: 3px;
      padding-bottom: 5px;
    }
    #list{
      height: 25px;
      width: 150px;
      float: right;
    }
    #show-number{
      width: 80px;
      float: left;
      line-height: 1.5;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" name="head-check" onclick="checkItems(this);">
        </label>
      </th>
      <th id="ln">LNamae<span class="caret"></span></th>
      <th id="fn">FName<span class="caret"></span></th>
      <th id="ag">Age<span class="caret"></span></th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody id="employee">
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>A</td>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>B</td>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>C</td>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
    </tr>
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>D</td>
      <td>D1</td>
      <td>D2</td>
      <td>D3</td>
    </tr>
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>E</td>
      <td>E1</td>
      <td>E2</td>
      <td>E3</td>
    </tr>
  </tbody>
</table>
<div id="list">
  <div id="show-number"></div>
  <ul id="pager" class="pagination">
    <li class="left">
      <a id='previous' class="current" href="javascript:void(0);" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li class="right">
      <a id='next' href="javascript:void(0);" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</div>

<script>
  pageSize = 3;
  var i = 1;
  var pages = Math.ceil($('.content').length / pageSize);
  var totalItems = Math.ceil($('.content').length);

  this.showPage = function (page) {
    this.currentPage = page;
    var from = (page - 1) * pageSize + 1;
    var to = from + pageSize - 1;
    var pagerHtml;
    $(".content").hide();
    $(".content").each(function (n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });
    var element = document.getElementById("show-number");
    if (pageSize < totalItems) {
        to = pageSize * page
        if (to > totalItems) {
            pagerHtml = from + " - " + totalItems + " of " + totalItems;
        }
        else {
            pagerHtml = from + " - " + to + " of " + totalItems;
        }
        element.innerHTML = pagerHtml;
    }
    else {
        pagerHtml = totalItems + " - " + totalItems + " of " + totalItems;
        element.innerHTML = pagerHtml;
    }
  }
  showPage(i);
  $("#previous").click(function () {
      $("#next").removeClass("current");
      $(this).addClass("current");
      if (i != 1) {
          showPage(--i);
      }

  });
  $("#next").click(function () {
      $("#previous").removeClass("current");
      $(this).addClass("current");
      if (i < ($('.content').length) / 3) {
          showPage(++i);
      }

  });
</script>

Answer 1

仅检查其父项 tr通过使用 checker[i].parentNode.parentNode.parentNode.style.display!='none' 可见

function checkItems(checkHeader) {
            var checker = document.getElementsByName('check-body');
            if (checkHeader.checked)
            {
                for (var i = 0; i < checker.length; i++)
                {
                    if(checker[i].parentNode.parentNode.parentNode.style.display!='none')
                      checker[i].checked = true;
                }
            }
            else
            {
                for (var i = 0; i < checker.length; i++)
                {
                      if(checker[i].parentNode.parentNode.parentNode.style.display!='none')
                      checker[i].checked = false;
                }
            }
        }

th{
  padding-right:20px;
}
.table-bordered {
        border: 1px solid #357ebd;
    }
    .table thead > tr > th {
        vertical-align: middle!important;
    }
    .table thead > tr > th,
    .table tbody > tr > th,
    .table tfoot > tr > th,
    .table thead > tr > td,
    .table tbody > tr > td,
    .table tfoot > tr > td {
        padding: 0 5px !important;
        vertical-align: middle;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td td:last-child {
        border: 1px solid #357ebd;
    }
    .table {
        margin-bottom: 0!important; 
    }
    th {
        color: #ffffff;
        background-color: #428bca;
        border-color: #357ebd;
    }
    td:last-child {
        text-align: center!important;
    }
    .form-control{
        padding: 0 20px!important;
    }
    .text-employee-list {
        padding-left: 0 !important;
    }
    th:hover {
        cursor: pointer;
        text-decoration: underline;
    }
    .div-employee-list > form {
        padding-left: 0 !important;
        margin-bottom: 15px;
    }
    .pg-normal {
        color: black;
        font-weight: normal;
        text-decoration: none;
        cursor: pointer;
        padding: 6px 12px;
        border: 1px solid #ddd;
        line-height: 1.42857143;
    }
    .pg-selected {
        color: white;
        font-weight: bold;
        text-decoration: underline;
        cursor: pointer;
        background-color: #337ab7;
        border-color: #337ab7;
        padding: 7px 12px;
        line-height: 1.42857143;
    }
    .pg-first {
        margin-left: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .pg-last {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    #pageNavPosition {
        line-height: 2.5;
    }
    select.selectpicker {
        border: 1px solid #cccccc;
        padding: 0 10px;
        height: 34px;
        border-radius: 4px;
    }
    .checkbox {
        margin-top: 5px;
    }
    #employee-list {
        height: 36px;
        margin-bottom: 5px;
    }
    #search-form {
        padding-right: 0;
        padding-left: 5px;
        margin: 0;
    }
    .caret {
        border-top: 4px solid white;
    }
    ul{
      list-style: none;
      display: inline-block;
      float: right;
      margin: 0;
      padding-left: 0;
    }
    ul li.left{
      float: left;
      padding: 0 10px;
      border: 1px solid grey;
      border-radius: 3px;
      padding-bottom: 5px;
    }
    ul li.right{
      float: right;
      padding: 0 10px;
      border: 1px solid grey;
      border-radius: 3px;
      padding-bottom: 5px;
    }
    #list{
      height: 25px;
      width: 150px;
      float: right;
    }
    #show-number{
      width: 80px;
      float: left;
      line-height: 1.5;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" name="head-check" onclick="checkItems(this);">
        </label>
      </th>
      <th id="ln">LNamae<span class="caret"></span></th>
      <th id="fn">FName<span class="caret"></span></th>
      <th id="ag">Age<span class="caret"></span></th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody id="employee">
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>A</td>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>B</td>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>C</td>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
    </tr>
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>D</td>
      <td>D1</td>
      <td>D2</td>
      <td>D3</td>
    </tr>
    <tr class="content">
      <td>
        <label>
          <input type="checkbox" class="checkbox" name="check-body">
        </label>
      </td>
      <td>E</td>
      <td>E1</td>
      <td>E2</td>
      <td>E3</td>
    </tr>
  </tbody>
</table>
<div id="list">
  <div id="show-number"></div>
  <ul id="pager" class="pagination">
    <li class="left">
      <a id='previous' class="current" href="javascript:void(0);" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li class="right">
      <a id='next' href="javascript:void(0);" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</div>

<script>
  pageSize = 3;
  var i = 1;
  var pages = Math.ceil($('.content').length / pageSize);
  var totalItems = Math.ceil($('.content').length);

  this.showPage = function (page) {
    this.currentPage = page;
    var from = (page - 1) * pageSize + 1;
    var to = from + pageSize - 1;
    var pagerHtml;
    $(".content").hide();
    $(".content").each(function (n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });
    var element = document.getElementById("show-number");
    if (pageSize < totalItems) {
        to = pageSize * page
        if (to > totalItems) {
            pagerHtml = from + " - " + totalItems + " of " + totalItems;
        }
        else {
            pagerHtml = from + " - " + to + " of " + totalItems;
        }
        element.innerHTML = pagerHtml;
    }
    else {
        pagerHtml = totalItems + " - " + totalItems + " of " + totalItems;
        element.innerHTML = pagerHtml;
    }
  }
  showPage(i);
  $("#previous").click(function () {  
      $('input[name="head-check"]').prop('checked', false);
      $("#next").removeClass("current");
      $(this).addClass("current");
      if (i != 1) {
          showPage(--i);
      }

  });
  $("#next").click(function () {
      $('input[name="head-check"]').prop('checked', false);
      $("#previous").removeClass("current");
      $(this).addClass("current");
      if (i < ($('.content').length) / 3) {
          showPage(++i);
      }

  });
</script>

**更新:** 使用 $('input[name="head-check"]').prop('checked', false); 取消选中标题复选框当您单击previous时和mext按钮