如何在取消选中复选框时取消筛选表行

How to unfilter table rows when checkbox is unchecked

本文关键字：取消 筛选 复选框      更新时间：2023-09-26

我有一个jquery脚本，当选中复选框或在文本框中键入单词时，该脚本可以使用循环函数过滤行。当您删除要取消过滤的单词时，文本框可以完美运行，但是当您取消选中复选框时，它不会取消过滤。它将在打开和关闭两个复选框之间切换。

但是，您可以欺骗它通过按名称过滤并在文本框中键入内容，然后擦除您键入的内容来取消过滤应用的复选框。

因此我不知道为什么当您取消选中复选框时，它不会取消过滤它，因为如果不选中该框，它怎么会在每次循环时继续应用过滤器。

var $rows = $("#data tr"),
    $filter = $("#filter");
$("#filter").keyup(function () {
    var filterText = $filter.val().toLowerCase();
    $rows.each(function () {
        var $row = $(this);
        $row.toggle($row.text().toLowerCase().indexOf(filterText) > -1);
    });
});

var $row_on = $("#data tr"),
    $filter_poweron = $("#poweron");
if(($filter_poweron).is(':checked')) {
    var filterText_poweron = $filter_poweron.val().toLowerCase();
    $row_on.each(function () {
        var $row_d = $(this);
        $row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
    });
}

var $row_off = $("#data tr"),
    $filter_poweroff = $("#poweroff");
if(($filter_poweroff).is(':checked')) {
    var filterText_poweroff = $filter_poweroff.val().toLowerCase();
    $row_off.each(function () {
        var $row_do = $(this);
        $row_do.toggle($row_do.text().toLowerCase().indexOf(filterText_poweroff) > -1);
    });
}

<td width='200' align='left'>
              <br><br>Filter: <input type='text' name='' id='filter' value='' style='width:270px;' data-toggle="tooltip" data-placement="left" title="Filter VM List." placeholder='Type to filter'>
              <br><input type="checkbox" id="poweron" value="1O">PoweredOn <input type="checkbox" id='poweroff' value="0F"> PoweredOff
</td>

您可能希望在事件侦听器中移动if(($filter_poweron).is(':checked')) {...}内容，以便每次单击或更改复选框时它都会运行。

像这样：

var $rows = $("#data tr");
$("#filter").keyup(function() {
  var filterText = $(this).val().toLowerCase();
  $rows.each(function() {
    var $row = $(this);
    $row.toggle($row.text().toLowerCase().indexOf(filterText) > -1);
  });
});
$("#poweron, #poweroff").on('click change', function() {
  var filterText = $(this).val().toLowerCase();
  var isChecked = $(this).is(':checked');
  $rows.each(function() {
    var $row_do = $(this);
    var showRow = isChecked ? $row_do.text().toLowerCase().indexOf(filterText) > -1 : true;
    $row_do.toggle(showRow);
  });
});

几个旁注： var $rows = $("#data tr") 和 var $row_on = $("#data tr") 和 var $row_off = $("#data tr") 都是多余的（使用相同的查询查询 dom 3 次）。你只需要一个变量来$rows。另外，您不需要($filter_poweron).is()周围的括号。

相关文章：