為什么我的復選框更改處理選擇或取消選擇每個表中的所有行而不是當前行？-有解無憂

我在一個頁面上有多個表格。每個表的標題中都有一個“檢查所有” checkbox。在正文中，checkbox每一行都有一個。

當用戶檢查每個男孩行時，將active應用一個類并突出顯示標記的行，并且計數器增加/減少。

檢查所有功能有問題。

當用戶checkbox在標題中選擇全部檢查時，它應該只選擇該表中的所有行。我只能讓它檢查所有表中的所有行。計數器還計算所有表中的所有行，而不僅僅是一個表。

我哪里錯了？

這是我的代碼：

// https://gomakethings.com/a-vanilla-js-foreach-helper-method/
var forEach = function forEach(arr, callback) {
  Array.prototype.forEach.call(arr, callback);
};

var tableInputs = document.querySelectorAll('.table tbody td .form-check-input');
var tableSelectAll = document.querySelectorAll('.table thead th .form-check-input');
var count = document.querySelector('.output span')

forEach(tableInputs, function(element) {
  element.addEventListener('change', function() {
    // active class to make row blue
    if (element.checked) {
      element.parentNode.parentNode.classList.add('active');
    } else {
      element.parentNode.parentNode.classList.remove('active');
    }

    // set count to -
    var numberSelected = 0;

    // count number of checked
    for (var i = 0; i < tableInputs.length; i  ) {
      if (tableInputs[i].checked == true) {
        numberSelected  ;
      }
    }

    // display the count
    count.innerHTML = numberSelected;
  });
});

forEach(tableSelectAll, function(element) {
  element.addEventListener('change', function() {

    if (element.checked == true) {
      forEach(tableInputs, function(input) {
        input.parentNode.parentNode.classList.add('active');
        input.checked = true;

        // set count to -
        var numberSelected = 0;

        // count number of checked
        for (var i = 0; i < tableInputs.length; i  ) {
          if (tableInputs[i].checked == true) {
            numberSelected  ;
          }
        }

        // display the count
        count.innerHTML = numberSelected;
      });
    } else {
      forEach(tableInputs, function(input) {
        input.parentNode.parentNode.classList.remove('active');
        input.checked = false;
        count.innerHTML = 0;
      });
    }
  });
});

.form-check-input {
  border: solid 1px #000;
  position: relative;
}

tr.active {
  background-color: lightblue;
}

body { margin: 0; zoom: .88; }
p { margin: 0; }

<div class="container">
  <div class="row">
    <div class="col-12">
      <p>Table 1</p>

      <table class="table table-sm table-borderless">
        <thead>
          <tr>
            <th><input class="form-check-input" type="checkbox" value=""></th>
            <th>Request date</th>
            <th>Name</th>
            <th>Organisation/Employer</th>
            <th>Selected Course(s)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Clark Kent</a></td>
            <td><span>Daily Planet</span></td>
            <td><span>Flight</span></td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Hal Jordan</a></td>
            <td><span>Green Lantern Corps</span></td>
            <td>Lighting</td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Arthur Curry</a></td>
            <td><span>Atlantis Water</span></td>
            <td>Aquatics</td>
          </tr>
        </tbody>
      </table>

      <p>Table 2</p>
      <table class="table table-sm table-borderless ">
        <thead>
          <tr>
            <th><input class="form-check-input" type="checkbox" value=""></th>
            <th>Request date</th>
            <th>Name</th>
            <th>Organisation/Employer</th>
            <th>Selected Course(s)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Barry Allen</a></td>
            <td><span>Star Labs</span></td>
            <td><span>Speed</span></td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Bruce Wayne</a></td>
            <td><span>Wayne Enterprises</span></td>
            <td>Combat</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<p class="output">Total selected: <span>0</span></p>

uj5u.com熱心網友回復：

無論采用哪種方法，都應始終將問題分解為針對 OP 要求的特定任務......

初始化與復選框相關的更改處理。
在任何復選框的狀態更改時，請更新所有與復選框相關的狀態。
在初始化時和復選框狀態更改時更新復選框計數器。
對于任何（最初）選中的復選框，也要更新其相關的表行狀態。

技術/工具是事件委托和選擇器 API

在任何復選框狀態更改時，處理程式都會檢查事件target是否屬于當前表的標題或正文。

基于此檢查，對于第一種情況，需要選中/取消選中當前表的所有與正文相關的復選框，或者根據第二種情況，需要更新唯一與標題相關的復選框的狀態。

更新復選框計數器是通過正確的選擇器和查詢的節點串列的長度值來實作的。

function updateCheckboxCounter() {
  document
    .querySelector('.output > span')
    .textContent = document
      .querySelectorAll('table.table tbody [type="checkbox"]:checked')
      .length;
}

function updateTableRowActiveState(checkboxNode) {
  checkboxNode
    .closest('tr')
    .classList
    .toggle('active', checkboxNode.checked);
}

function updateCheckboxDependedStates({ target }) {
  const tableNode = target.closest('table.table');

  if (target.matches('thead [type="checkbox"]')) {

    tableNode
      .querySelectorAll('tbody [type="checkbox"]')
      .forEach(elmNode => {

        elmNode.checked = target.checked;

        updateTableRowActiveState(elmNode);
      });

  } else if (target.matches('tbody [type="checkbox"]')) {

    tableNode
      .querySelector('thead [type="checkbox"]')
      .checked = Array
        .from(
          target
            .closest('tbody')
            .querySelectorAll('[type="checkbox"]')
        )
        .every(elmNode => elmNode.checked);

    updateTableRowActiveState(target);
  }
  updateCheckboxCounter();
}

function init() {
  document
    .querySelectorAll('table.table')
    .forEach(elmNode =>

      elmNode.addEventListener('change', updateCheckboxDependedStates)
    );
  document
    .querySelectorAll('table.table tbody [type="checkbox"]:checked')
    .forEach(updateTableRowActiveState);

  updateCheckboxCounter();
}
init();

.form-check-input {
  border: solid 1px #000;
  position: relative;
}
tr.active {
  background-color: lightblue;
}

body { margin: 0; zoom: .88; }
p { margin: 0; }

<div class="container">
  <div class="row">
    <div class="col-12">

      <p>Table 1</p>

      <table class="table table-sm table-borderless">
        <thead>
          <tr>
            <th><input class="form-check-input" type="checkbox" value=""></th>
            <th>Request date</th>
            <th>Name</th>
            <th>Organisation/Employer</th>
            <th>Selected Course(s)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Clark Kent</a></td>
            <td><span>Daily Planet</span></td>
            <td><span>Flight</span></td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Hal Jordan</a></td>
            <td><span>Green Lantern Corps</span></td>
            <td>Lighting</td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value="" checked></td>
            <td>10/10/2014</td>
            <td><a href="#">Arthur Curry</a></td>
            <td><span>Atlantis Water</span></td>
            <td>Aquatics</td>
          </tr>
        </tbody>
      </table>

      <p>Table 2</p>

      <table class="table table-sm table-borderless ">
        <thead>
          <tr>
            <th><input class="form-check-input" type="checkbox" value=""></th>
            <th>Request date</th>
            <th>Name</th>
            <th>Organisation/Employer</th>
            <th>Selected Course(s)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input class="form-check-input" type="checkbox" value="" checked></td>
            <td>10/10/2014</td>
            <td><a href="#">Barry Allen</a></td>
            <td><span>Star Labs</span></td>
            <td><span>Speed</span></td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Bruce Wayne</a></td>
            <td><span>Wayne Enterprises</span></td>
            <td>Combat</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</div>

<p class="output">Total selected: <span>0</span></p>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510232.html

標籤：javascriptdom事件处理选择器-api事件委托

上一篇：如何使用JSvanilla僅重繪一個DOM元素

下一篇：如何使用.indexOf獲取NodeList中事件元素的索引