Question

我有一个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>

Answer 1

您可能希望将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()周围的parens。

取消选中复选框时如何取消过滤表行

1 个答案: