Hiding rows with class "hidden" after change the checkbox

I'm using jQuery datatables. I'd like to hide all rows with class="hidden".

This code:

var table = $('#table1').DataTable();
table.rows('.hidden').hide();

It's not working (rows are not hidden), and I see this text in console:

table.rows(...).hide is not a function

How can I use class="hidden" to hide all rows?

---

HTML code:

<tr class="">
    <td>1</td>
    <td>ABC</td>
    <td>17</td>
</tr>

<tr class="hidden">
    <td>2</td>
    <td>DEF</td>
    <td>22</td>
</tr>

<tr class="">
    <td>3</td>
    <td>GHI</td>
    <td>55</td>
</tr>

<tr class="hidden">
    <td>4</td>
    <td>JKL</td>
    <td>11</td>
</tr>
<input id="hideRows" name="hideRows" type="checkbox">

JS code:

$('#table1').DataTable();

$('#hideRows').change(function() 
{
    var table = $('#table1').DataTable();
    $('tr.hidden').hide();
    $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
        if ($(oSettings.nTable).hasClass('hidden')) {
            return aData[16] == '' || $('#hideRows').is(':checked');
        } else return true;
    });
    table.draw();
});