jquery to filter table with checkboxes by checkbox state using Materialize switches

Question

EDITED: Changed jQuery below - Now I get the correct count in the console for the number of unchecked checkboxes with the given class (single column), but in the if statement, I still get that they are all unchecked even though 2 are checked, and 10 are unchecked in my data.

I have a table filled and created dynamically, and in some of the columns I use the Materialize switches to set values in a database.

I want to use the Materialize checkbox on these columns to filter the table down to those switches that are in the "on" position. This is 'checked' in the html.

I have text fields on other columns and am filtering successfully with those, but I can't figure out how to reference a specific column on a row where the switch state is 'checked'.

<table>
    <tr>
        <td>
            <div class="switch">
                Selected<br />
                <label>
                Off
                <input type="checkbox" class="isSelected" checked="    {{isSelected}}">
                <span class="lever"></span>
                On
                </label>
            </div>
        </td>
        <td>
            <div class="switch">
                Checked In<br />
                <label>
                Off
                <input type="checkbox" class="isCheckedIn" checked="    {{isCheckedIn}}">
                <span class="lever"></span>
                On
                </label>
            </div>
        </td>
     </tr>
</table>

This id done in Meteor, so the handlebar values basically give checked or false, in order to dynamically turn the switch to on based on the database value.

JQuery

'click .checkFilter' (event) {
    // console.log('checked or unchecked');
    var colId = event.currentTarget.id;
    var state = event.currentTarget.checked;
    $row = $('#table tr.trMainData');
    // console.log('State of ' + colId + ' is now ' + state);
    console.log($('input:checkbox.isSelected:not(:checked)').length);
    $('table tr.trInner').each(function() {
        if ($('input:checkbox.isSelected:not(:checked)')) {
            console.log('Unchecked: ' + $.trim($(this).find('td').eq(0).text()));
            $row.hide();
        } else {
            console.log('Checked' + $.trim($(this).find('td').eq(0).text()));
            $row.show();
        }
    });

I'm just trying to console log something now if it can detect that an item in the column is checked, and I don't even get that.

Any help is greatly appreciated.

bmcgonag bmcgonag · Accepted Answer · 2016-09-05T11:57:37

Ok, I have fiddled around a ton, and found a much simpler way.

Basically replace all of:

$('table tr.trInner').each(function() {
    if ($('input:checkbox.isSelected:not(:checked)')) {
        console.log('Unchecked: ' + $.trim($(this).find('td').eq(0).text()));
        $row.hide();
    } else {
        console.log('Checked' + $.trim($(this).find('td').eq(0).text()));
        $row.show();
    }
});

with the following single line:

$('input:checkbox.isSelected:not(:checked)').closest('.trMainData').hide();

See, I have a nested tr in my table, so I need to hide the main row with the class trMainData, whereas I'm looking at td elements inside an inner row with class trInner.

So, using the line above, I identify table cells with the class isSelected that are not checked, and then tell the page to hide the main row using it's class with the jquery closest() function.

whew!

jquery to filter table with checkboxes by checkbox state using Materialize switches

EDITED: Changed jQuery below - Now I get the correct count in the console for the number of unchecked checkboxes with the given class (single column), but in the if statement, I still get that they are all unchecked even though 2 are checked, and 10 are unchecked in my data.

1 Answers