Question

我希望能够使用复选框过滤表格，这是我想出来的，但似乎无法正常工作。

Basiclly我希望表隐藏未检查的表并显示那些表。 HTML代码

    <div class="tags">
    <label><input type="checkbox" rel="a" /> a </label>
    <label><input type="checkbox" rel="x" /> x </label>

</div>

<table>
    <thead>
        <tr><th>list</th></tr>
    </thead>
    <tbody>
        <tr><td>a</td></tr>
        <tr><td>a</td></tr>
        <tr><td>b</td></tr>
        <tr><td>a</td></tr>
        <tr><td>x</td></tr>

    </tbody>
</table>

JS代码

$('div.tags').delegate('input:checkbox', 'change', function()
{
     var $lis = $('table tbody > tr').hide();
     //For each one checked
     $('input:checked').each(function()
     {
          $lis.filter('.' + $(this)).show();
     });      
}).find('input:checkbox').change();

我想知道我是否做错了什么？

Answer 1

这是有效的HTML和JavaScript（两者都已修改）：

<div class="tags">
    <label><input type="checkbox" rel="a" /> a </label>
    <label><input type="checkbox" rel="x" /> x </label>
</div>

<table>
    <thead>
        <tr><th>list</th></tr>
    </thead>
    <tbody>
        <tr class="a"><td>a</td></tr>
        <tr class="a"><td>a</td></tr>
        <tr class="b"><td>b</td></tr>
        <tr class="a"><td>a</td></tr>
        <tr class="x"><td>x</td></tr>
    </tbody>
</table>

...

var updateRows = function()
{
    // Get ones to show
    var toShow = [];
    $('div.tags input[type=checkbox]:checked').each(function(){
        var box = $(this);
        toShow.push('.' + box.attr('rel'));
    });
    toShow = toShow.join(', ');

    // Filter rows
    $('table > tbody > tr').each(function() {
        var row = $(this);
        row.toggle( row.is(toShow) );
    });
};
$('div.tags input[type=checkbox]').click(updateRows);
updateRows();

HTH

Answer 2

delegate的选择器充当到目前为止所选元素的过滤器。它不像find那样工作，查找包含在所选元素中的元素。这意味着您的更改函数未应用于任何内容，因为过滤器选择器与目前为止所选的任何元素都不匹配。鉴于您的HTML，您可以使其更简单，无需委托处理程序。

此外，您的处理程序正在尝试使用类选择器选择要显示的行，但是行没有具有值作为内容的类。您应该为行提供适当的类，或者更改选择行的方式。

$('div.tags input:checkbox').change( function()
{
     var selection = $(this).val();
     var $lis = $('table tbody > tr').hide();
     //For each one checked
     $('input:checked').each(function()
     {
          $lis.filter( function() { return $(this).text() == selection; }).show();
     });      
});

jQuery过滤表复选框

2 个答案: