jQuery Filter tables by checkbox

Question

I am wanted to be able to filter a table with checkboxes this is what I came up with, but it seems not to work.

Basiclly I want the table to hide the one that are not checked and show the ones that are. HTML CODE

    <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 code

$('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();

Am wondering if I am doing something wrong?

I don't follow you completely. Your table above does not have any checkboxes... You mean you want to hide the rows in the table which have a ticked checkbox?? — jeffreyveon
– jeffreyveon, Commented Oct 13, 2011 at 1:38

N Rohler · Accepted Answer · 2011-10-13 01:41:27Z

2

Here's working HTML and JavaScript (both have been modified):

<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

answered Oct 13, 2011 at 1:41

N Rohler

4,61526 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RussellHarrower Over a year ago

Can I ask, why it hides the table onload. I need it to hide the ones that are not = to the checkbox

N Rohler Over a year ago

@RussellHarrower: In the original question you said "I want the table to hide the one[s] that are not checked." Initially, none of the checkboxes are checked. Therefore, because nothing is checked, none of the rows should be visible. If you want all rows visible until a checkbox selection is made, just remove the bottom updateRows(); call. Note, though, that you have a row for b but no corresponding checkbox. That means there's no way to have it shown by your original criteria.

tvanfosson · Accepted Answer · 2011-10-13 01:36:45Z

The selector for delegate acts as a filter on the elements selected so far. It doesn't work like find, finding elements that are contained within the selected elements. This means that your change function isn't being applied to anything because the filter selector doesn't match any of the elements selected so far. Given your HTML you can make it much simpler, without involving delegated handlers.

Also, your handler is trying to select the rows to show using a class selector, but the rows don't have the class they have the values as the contents. You should either give the rows the appropriate class or change how you are selecting the rows.

$('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();
     });      
});

Collectives™ on Stack Overflow

jQuery Filter tables by checkbox

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related