Check the state of multiple checkboxes in nested table row using JQuery before action

Question

I have a table that contains a list of recipients for gifts. Each recipient can have one or more gifts listed for them. I do this using a nested set of rows (one nested row in a table cell per gift) in a table cell.

Each gift has four statuses (shown through checkboxes) of Selected, Checked In, Out for Delivery, Delivered.

I need to hide the main row for the recipient when all of the checkboxes for a specific status are checked.

So, if I want to see only the recipients where a gift is not yet checked in, I would want to still see any recipients where only 1 gift may still be unchecked for 'Checked In' status.

I have the following to hide and show the rows now:

if (state === true) {
        switch(colId) {
            case "selectedFilter":
                $('input:checkbox.isSelected:not(:checked)').closest('.trMainData').hide();
                break;
            case "selectedFilterUnchecked":
                $('input:checkbox.isSelected:checked').closest('.trMainData').hide();
                break;
            case "checkedInFilter":
                $('input:checkbox.isCheckedIn:not(:checked)').closest('.trMainData').hide();
                break;
            case "checkedInFilterUnchecked":
                $('input:checkbox.isCheckedIn:checked').closest('.trMainData').hide();
                break;
            case "outForDeliveryFilter":
                $('input:checkbox.isOutForDelivery:not(:checked)').closest('.trMainData').hide();
                break;
            case "outForDeliveryFilterUnchecked":
                $('input:checkbox.isOutForDelivery:checked').closest('.trMainData').hide();
                break;
        }
    } else if (state === false) {
        $('table tr.trMainData:hidden').show();
    }

Where the 'state' is the state of a checkbox filter being clicked by the user (true or false) and 'trMainData' is the class on the main row for the recipients.

The issue is that if I set only 1 gift out of 2 as Checked In, then the entire recipient row is hidden, including the gift that has not yet been checked in.

Any help and suggestions, as always are greatly appreciated.

bmcgonag bmcgonag · Accepted Answer · 2016-09-10T14:52:39

So, there's something about posting my question that then give's me a bright idea. Not sure this is the best, or right way, but it's working.

Here's what I did.

if (state === true) {
        switch(colId) {
            case "selectedFilter":
                $('input:checkbox.isSelected:not(:checked)').closest('.trMainData').hide();
                $('input:checkbox.isSelected:checked:hidden').closest('.trMainData').show();
                break;
            case "selectedFilterUnchecked":
                $('input:checkbox.isSelected:checked').closest('.trMainData').hide();
                $('input:checkbox.isSelected:not(:checked):hidden').closest('.trMainData').show();
                break;
            case "checkedInFilter":
                $('input:checkbox.isCheckedIn:not(:checked)').closest('.trMainData').hide();
                $('input:checkbox.isCheckedIn:checked:hidden').closest('.trMainData').show();
                break;
            case "checkedInFilterUnchecked":
                $('input:checkbox.isCheckedIn:checked').closest('.trMainData').hide();
                $('input:checkbox.isCheckedIn:not(:checked):hidden').closest('.trMainData').show();
                break;
            case "outForDeliveryFilter":
                $('input:checkbox.isOutForDelivery:not(:checked)').closest('.trMainData').hide();
                $('input:checkbox.isOutForDelivery:checked:hidden').closest('.trMainData').show();
                break;
            case "outForDeliveryFilterUnchecked":
                $('input:checkbox.isOutForDelivery:checked').closest('.trMainData').hide();
                $('input:checkbox.isOutForDelivery:not(:checked):hidden').closest('.trMainData').show();
                break;
        }
    } else if (state === false) {
        $('table tr.trMainData:hidden').show();
    }

So, essentially, first I hide every row that has even 1 item checked for the column I'm filtering by. Then I search through those hidden columns, and show any of them that have an item that should be shown, and re-show it...basically filtering twice, but it's working.

Check the state of multiple checkboxes in nested table row using JQuery before action

1 Answers