jQuery Фильтр таблиц по флажку

Question

Я хотел бы иметь возможность фильтровать таблицу с помощью флажков, это то, что я придумал, но, похоже, это не работает.

В основном я хочу, чтобы таблица скрывала ту, которая не отмеченапокажи те, которые есть.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();
     });      
});