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

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 是否可见，然后只将检查添加到 true 到仅那些 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>