首先，我试图使选择所有复选框，如果我单击表头中的选择所有复选框，整个表行将选择并显示一个复选框反向消息，即我选择了多少复选框。这里的问题是，如果我单击select all复选框，反向消息不会显示楼上的表，即我选择了多少行。

其次，如果我从任何列中筛选任何数字，相同的数字将显示同一列中有多少行具有相同的数字。如果我选中了所有复选框，那么反向消息将显示我选中了多少行复选框。这里，问题是显示整个表行计数器消息而不显示筛选后的行计数器消息。

但是我面临着一个问题来解决这个问题。我该如何解决这个问题呢？

null

$( 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>

null