Hide/display rows with multiple different classes

Question

I have a table that has rows of bugs. Each row, has a class assigned to it based on the scrub status of the bug.

<tr class="bugrow wait_dev">     <td>blah</td></tr>
<tr class="bugrow wait_support"> <td>blah</td></tr>
<tr class="bugrow wait_branch">  <td>blah</td></tr>

I am using Bootstrap to create a button list for each of the different statuses. The buttons are really just checkboxes in HTML.

<input class="scrub_checkbox" id="wait_dev" type="checkbox" autocomplete="off">Wait dev
<input class="scrub_checkbox" id="wait_support" type="checkbox" autocomplete="off">Wait support
<input class="scrub_checkbox" id="wait_branch" type="checkbox" autocomplete="off">Wait branch

What I want to do, is have a jQuery function where when a button is clicked (and the underlying checkbox is selected) all rows that do not have the corresponding class, are hidden leaving only the selected rows visible.

I want to be able to click/select multiple options, and have all of those row types shown, and all else hidden.

How can I do this in jQuery?

Solution

I came up with a solution based off of TrueBlueAussie's OR option. This will show all rows once none of the checkboxes are selected.

$('.scrub_checkbox:checkbox').change(function(){
    // Build a list of comma-separated classes
    var classes = ""
    // for each checked box with class scrub_checkbox
    $('.scrub_checkbox:checkbox:checked').each(function(){
        if (classes) classes += ",";
        classes+= "." + $(this).attr('id');
    });
    if (classes){   // if there are classes to show
        $('.bugrow').hide().filter(classes).show(); 
    } else {        // nothing checked, show all
        $('.bugrow').show();
    }
});

write some code first show us what you have done and then ask for help — cssGEEK, Mar 24 '15 at 15:23

score 0 · Answer 1 · edited May 23 '17 at 11:50

Put all classes into an array. Then when multiple ids of items are selected put them into an array of their own. Then sort through the array of classes to see if there are any uniques vs the array of IDs selected. If there are uniques left over then do a function hide on them.

Here's a help on how to achieve this

I won't do it for you as you've not shown that you've put any jquery work into it yourself. However a hide function:

function hideElements(classNames){
    for(i<0;i<classNames.length;i++){
        $(classNames[i]).hide();
    }
}

arrayOfClassNames = ['class1', 'class2'];
hideElements(arrayOfClassNames);

Super simple. You pass through the underlying class names left over in an array. Then it hides them all for you. You would then pass the array ID's into its own unique function called showElements(listOfIDs); where you would the exact opposite of hide. In order to make the ones selected reappear.

score 0 · Answer 2 · answered Mar 24 '15 at 15:39

0

Here is how you might handle it: http://jsfiddle.net/fxaytn1L/

jQuery:

jQuery(function() {
    jQuery('input[type="checkbox"]').change(function() {
        var cBs = jQuery('.showCB:checked'),
            chkd = cBs.length,            
            toHide = jQuery('.bugrow');
        toHide.show();
        if (chkd > 0) {
            cBs.each(function() {
                toHide = toHide.not('.' + this.id);
            });
            toHide.hide();
        }
    });
});

answered Mar 24 '15 at 15:39

Duffmaster33

1,160
9
16

Your length checking is pointless. The whole idea of jQuery is that it works just as well on *zero-length* collections. Get rid of `chkd` and `if (chkd > 0)` as they add no value. – iCollect.it Ltd Mar 24 '15 at 16:47
Yeah, that's not why I do it. If you read the code, you will see I am selecting all rows and then filtering out checked values so I don't hide any checked ones. If I didn't check the length, it would essentially hide every single row, which I would assume is not the desired behavior. Perhaps I could have written it differently, however there is no need to be rude when you pretty clearly have not actually read and understood my code. – Duffmaster33 Mar 24 '15 at 21:12
It was not my intention to be rude. I see now the test was required with your specific way of approaching the problem. – iCollect.it Ltd Mar 24 '15 at 22:13

iCollect.it Ltd · Accepted Answer · 2015-03-24T15:44:49.647

If you want "AND" logic (i.e. combine the selections), you can generate a jQuery selector based on the ID of the checked checkboxes (treated as classes, by adding a . prefix):

e.g.

$(':checkbox').change(function(){
    // Build a list of comma-separated classes
    var classes = ""
    $(':checkbox:checked').each(function(){
        classes+= "." + $(this).attr('id');
    });
    // hide all, then show matching only
    $('.bugrow').hide().filter(classes).show();
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/nrgsqr3p/1/

If you want "OR" selections instead, generate a comma separated list of selectors instead.

e.g.

$(':checkbox').change(function(){
    // Build a list of comma-separated classes
    var classes = ""
    $(':checkbox:checked').each(function(){
        if (classes) classes += ",";
        classes+= "." + $(this).attr('id');
    });
    // hide all, then show matching only
    $('.bugrow').hide().filter(classes).show();
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/nrgsqr3p/2/

score 0 · Answer 4 · answered Mar 24 '15 at 15:49

Give each checkbox a class and then every time one changes loop through and hide all not check. Probably not the most efficient but works fine with not many checkboxes.

$('input').change(function () {
    $('tr').show();
    $('input:checkbox.check').each(function () {
        if (!this.checked) {
            $('.' + $(this).attr('id')).hide();
        }
    });
});

http://jsfiddle.net/vn8Lxgod/2/

Hide/display rows with multiple different classes

4 Answers4