过滤表行 - 带有全选复选框的多个过滤器

Question

首先，如果我单击表格标题中的全选复选框，我会尝试选中所有复选框，整个表格行将选择并显示一个复选框反消息，说明有多少个复选框我选择了。 这里，问题是如果我点击全选复选框，反消息不会显示楼上的表格我选择了多少行。

其次，如果我从任何列中过滤任何数字，如果我选中所有复选框，那么相同数字将显示在获得过滤后的行后同一列中有多少行具有相同数字，然后计数器-消息将显示我检查了多少行复选框。 这里，问题是显示整个表格行计数器消息未显示过滤行计数器消息。

但是我遇到了解决这个问题的问题。我该如何解决这个问题？

$( document ).ready(function() {

  $('.ckbCheckAll, .checkBoxClass').click(function () {
    if($('.ckbCheckAll:checked').length > 0 || $('.checkBoxClass:checked').length > 0) {
            $('.checkbox-count-content').show(500);
        }else{
            $('.checkbox-count-content').hide(500);
        }
    })

    const countCheckedAll = function() {
        const counter = $(".checkBoxClass:checked").length;
        $(".checkbox-count").html( counter + " variation selected!" );
        console.log(counter + ' variation selected!');
    };

    $(".checkBoxClass").on( "click", countCheckedAll );

    $('.ckbCheckAll').click(function () {
      const bulkIds = $('input[type="number').val();
      console.log(bulkIds + ' selected!');
      if(bulkIds != ''){
          bulkIds.split('/').forEach(function () {
              $('tbody').find('.checkBoxClass').prop('checked', true);
              $(this).closest('table').find('td .checkBoxClass').prop('checked', this.checked);
              countCheckedAll();
          })
      }else{
          $(".checkBoxClass").prop('checked', $(this).prop('checked'));
      }
   })

    $(".checkBoxClass").change(function(){
        if (!$(this).prop("checked")){
            $(".ckbCheckAll").prop("checked",false);
        }
    });


  const aggrFn = {
  "=": (a, b) => a == b,
  "<": (a, b) => a < b,
  ">": (a, b) => a > b,
  "<=": (a, b) => a <= b,
  ">=": (a, b) => a >= b,
  };

  function filterColumns($table) {
  const colFilters = {};
  $table.find("thead .filter").each(function() {
      colFilters[$(this).index()] = {
      agg: $(this).find("select").val(),
      val: $(this).find("input").val(),
      }
  });
  $table.find("tbody tr").each(function() {
      const $tr = $(this);
      const shouldHide = Object.entries(colFilters).some(([k, v]) => {
          return v.val === "" ? false : !aggrFn[v.agg](parseFloat($tr.find(`td:eq(${k})`).text()), parseFloat(v.val));
      });
      $tr.toggleClass("u-none", shouldHide);
  });
  }

  $(".filter").on("input", ":input", function(ev) {
  filterColumns($(this).closest("table"));
  });

});

table {
    width: 100%;
    border-collapse: collapse;
    }

    td {
    text-align: center;
    padding: 10px;
    }

    table thead tr th {
      border: 1px solid #cccccc;
      padding: 10px;
    }

    table tbody tr td {
      border: 1px solid #cccccc;
    }

    .filter>div {
    display: flex;
    justify-content: center;
    }

    .filter input {
    width: 6em;
    }

    .u-none {
    display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="checkbox-count-content" style="display: none;">
  <div class="checkbox-count"></div>
</div>
    
<table>
  <thead>
    <th><input type="checkbox" class="ckbCheckAll" id="ckbCheckAll"></th>
    <th class="filter">
      Available Quantity
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Regular Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Base Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td> 
      <td>4</td>
      <td>10</td>
      <td>12</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>12</td>
      <td>11</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>1</td>
      <td>14</td>
      <td>12</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>0</td>
      <td>8</td>
      <td>10</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>14</td>
      <td>18</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>1</td>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>10</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用:visible 来检查 trs 是否可见，然后只将选中的复选框添加到那些 trs 复选框中，然后调用您的函数来显示计数，否则只需从复选框中删除选中的复选框

演示代码：

$(document).ready(function() {

  $('.ckbCheckAll, .checkBoxClass').click(function() {
    if ($('.ckbCheckAll:checked').length > 0 || $('.checkBoxClass:checked').length > 0) {
      $('.checkbox-count-content').show(500);
    } else {
      $('.checkbox-count-content').hide(500);
    }
  })

  const countCheckedAll = function() {
    const counter = $(".checkBoxClass:checked").length;
    $(".checkbox-count").html(counter + " variation selected!");
    console.log(counter + ' variation selected!');
  };

  $(".checkBoxClass").on("click", countCheckedAll);

  $('.ckbCheckAll').click(function() {
    if ($(this).is(":checked")) {
      //get tr which is visible ..add checked to that checkboxes
      $('tbody').find('tr:visible .checkBoxClass').prop('checked', true);
      countCheckedAll();
    } else {
      //remove checked
      $(".checkBoxClass").prop('checked', false);
      $('.checkbox-count-content').hide(500);
    }
  })

  $(".checkBoxClass").change(function() {
    if (!$(this).prop("checked")) {
      $(".ckbCheckAll").prop("checked", false);
    }
  });


  const aggrFn = {
    "=": (a, b) => a == b,
    "<": (a, b) => a < b,
    ">": (a, b) => a > b,
    "<=": (a, b) => a <= b,
    ">=": (a, b) => a >= b,
  };

  function filterColumns($table) {
    const colFilters = {};
    $table.find("thead .filter").each(function() {
      colFilters[$(this).index()] = {
        agg: $(this).find("select").val(),
        val: $(this).find("input").val(),
      }
    });
    $table.find("tbody tr").each(function() {
      const $tr = $(this);
      const shouldHide = Object.entries(colFilters).some(([k, v]) => {
        return v.val === "" ? false : !aggrFn[v.agg](parseFloat($tr.find(`td:eq(${k})`).text()), parseFloat(v.val));
      });
      $tr.toggleClass("u-none", shouldHide);
    });
  }

  $(".filter").on("input", ":input", function(ev) {
    filterColumns($(this).closest("table"));
  });

});

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  text-align: center;
  padding: 10px;
}

table thead tr th {
  border: 1px solid #cccccc;
  padding: 10px;
}

table tbody tr td {
  border: 1px solid #cccccc;
}

.filter>div {
  display: flex;
  justify-content: center;
}

.filter input {
  width: 6em;
}

.u-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="checkbox-count-content" style="display: none;">
  <div class="checkbox-count"></div>
</div>

<table>
  <thead>
    <th><input type="checkbox" class="ckbCheckAll" id="ckbCheckAll"></th>
    <th class="filter">
      Available Quantity
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Regular Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Base Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>4</td>
      <td>10</td>
      <td>12</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>12</td>
      <td>11</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>1</td>
      <td>14</td>
      <td>12</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>0</td>
      <td>8</td>
      <td>10</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>14</td>
      <td>18</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>1</td>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>10</td>
      <td>8</td>
    </tr>
  </tbody>
</table>