Only Select visible checkboxes on paginated Table

Hoping to get help with this problem,

I have a table of several hundred rows, to which I've added pagination. On the rows there are checkboxes. I have a checkall button that will check the column of checkboxes.

At which point, I'd like only the checkboxes that are on the current page to be checked, the checkboxes on the visible to remain unselected.

http://ift.tt/2AzbQw2

the html

<input type = 'checkbox' id ='toggleAll'>
<table id="data"><form>
<tr><td><input type = 'checkbox' class ='check'></td><td>Row 1</td></tr>
<tr><td><input type = 'checkbox'class ='check' > </td><td>Row 2</td></tr>
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 3 </td></tr>
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 4</td></tr>
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 5</td></tr>
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 6</td></tr>
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 7</td></tr>
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 8</td></tr>
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 9</td></tr>
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 10</td></tr>
<tr><td><input type = 'checkbox'class ='check' > </td><td>Row 11</td></tr>
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 12</td></tr>
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 13</td></tr>
<tr><td><input type = 'checkbox'class ='check'></td> <td>Row 14</td></tr>
<tr><td><input type = 'checkbox' class ='check'></td><td>Row 15</td></tr>
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 16</td></tr>
<tr><td><input type = 'checkbox'class ='check'> </td><td>Row 17</td></tr>
<tr><td> <input type = 'checkbox'class ='check'></td><td>Row 18</td></tr></table>
<input type ='submit' id = 'clearCheck'></form>

and the script

$(document).ready(function(){
$('#data').after('<div id="nav"></div>');
var rowsShown = 4;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal/rowsShown;
for(i = 0;i < numPages;i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function(){

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
    css('display','table-row').animate({opacity:1}, 300);
});

$("#toggleAll").on("click", function() {
    if ($(this).prop("checked") == true && $(this).is(':visible')) $(".check").each(function() {$(this).prop("checked", true);});
    if ($(this).prop("checked") == false && $(this).is(':visible')) $(".check").each(function() {$(this).prop("checked", false);});
    });



$("#clearCheck").on("click", function() {
$(".check").each(function() {$(this).prop("checked", false);});
});


});

I found an answer here that checked to see if the checkbox was visible or not, so I'm assuming that I have to put a style:none on the non-active page ones and remove them once the page become active to use :visble, however I'm not sure how to accomplish that.

Thanks in advance.