Question

我有一个HTML表格，其中包含用于过滤的复选框，而我可以为各个复选框启用过滤功能，当我尝试一起使用它们时，结果就无法按预期工作。

[]Male []Popular []Active
============================================================
= FirstName  = LastName  = Sex    =  Popular  = Active     =
= John       = Doe       = Male   =  No       = Yes        =
= Eve        = Jackson   = Female =  Yes      = No         =
= Adam       = Johnson   = Child  =  Yes      = Yes        =
============================================================

上面是表格的样子

表格的HTML代码

<input type="checkbox" id="male">Male<br>
<input type="checkbox" id="popular">Popular<br>
<input type="checkbox" id="active">Active<br>

<table>
<thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Sex</th>
    <th>Popular</th>
    <th>Active</th>
</thead>
<tbody>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>Male</td>
  <td>No</td>
  <td>Yes</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>Female</td>
  <td>Yes</td>
  <td>No</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson</td>
  <td>Child</td>
  <td>Yes</td>
  <td>Yes</td>
</tr>
</tbody>
</table>

的Javascript

//a check box has been checked
$(':checkbox').change(function() {
    //are there no check boxes selected?
    if ($('input:checkbox:checked').length > 0) {
        //hide all rows
        $('tbody tr').each(function() {
            $(this).hide();
        });
        //show only rows needed to be show
        if ($('#male').is(':checked')) {
            ShowRow('Male','2');
        }
        if ($('#popular').is(':checked')) {
            ShowRow('Yes','3');
        }
        if ($('#active').is(':checked')) {
            ShowRow('Yes','4');
        }
    } else {
        //there are no check boxes selected, show all rows
        $('tr').each(function() {
            $(this).show();
        });
    }
});

function ShowRow(text, column) {
    $('tr').each(function() {
        if ($(this).children('td:eq(' + column + ')').text().indexOf(text) != '-1') {
            $(this).show();
        }
    });
}

单独地，复选框正常工作，如果我同时使用多个盒子就会出错，例如，如果我打勾，男性，那么只有男性会显示，如果我再检查热门，那么每个人都会出现。< / p>

这是JSFiddle URL; http://jsfiddle.net/3XhCa/5/

如果有人能指出我正确的方向，我会很感激，经过大约3天的搜索，我的想法已经不多了。

我的另一个想法是建立一个非常大的if语句，但我不认为这是正确的方法。

Answer 1

问题是你逻辑构建的谓词是一个析取（＆＃34;或＆＃34; s的组合）。因此，当您检查＆＃34;男性＆＃34;和＆＃34;活跃＆＃34;该脚本显示了包含男性或活跃用户的所有行，在您的示例中都是这些行。

@Rajaprabhu Aravindasamy的答案很好，但需要多次通过你桌子的行。如果你愿意，你可以采用更实用的方法，并构建一个谓词，让你只需对它们进行一次传递：

http://jsfiddle.net/3XhCa/10/

function tautology() {
    return true;
}

function makePredicate(text, column) {
    return function(row) {
        return -1 !== $(row).children('td:eq(' + column + ')').text().indexOf(text);
    };
}

var isMale = makePredicate('Male', 2);
var isPopular = makePredicate('Yes', 3);
var isActive = makePredicate('Yes', 4);

function conjoin(f, g) {
    return function (row) {
        return f(row) && g(row);
    };
};

//a check box has been checked
$(':checkbox').change(function() {
    var isVisible = tautology;

    //are there no check boxes selected?
    if ($('input:checkbox:checked').length > 0) {
        //show only rows needed to be show
        if ($('#male').is(':checked')) {
            isVisible = conjoin(isVisible, isMale);
        }
        if ($('#popular').is(':checked')) {
            isVisible = conjoin(isVisible, isPopular);
        }
        if ($('#active').is(':checked')) {
            isVisible = conjoin(isVisible, isActive);
        }
        $('tbody > tr').each(function() {
            $(this).toggle(isVisible(this));
        });
    } else {
        //there are no check boxes selected, show all rows
        $('tr').show();
    }
});

Answer 2

尝试this，

$(':checkbox').change(function () {
    $('tr').show();
    if ($('input:checkbox:checked').length > 0) {
        if ($('#male').is(':checked')) {
            ShowRow('Male', '2');
        }
        if ($('#popular').is(':checked')) {
            ShowRow('Yes', '3');
        }
        if ($('#active').is(':checked')) {
            ShowRow('Yes', '4');
        }
    }
});

function ShowRow(text, column) {
    $('tr:visible:not(:first)').each(function () {
        if ($(this).children('td:eq(' + column + ')').text().indexOf(text) != '-1') {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}

用Jquery隐藏表行，以及多个复选框

2 个答案: