ページ区切り表の目に見えるチェックボックスを選択する

Question

この問題の助けを借りて、

私はページングを追加した数百行のテーブルを持っています。行にはチェックボックスがあります。私は、チェックボックスの列をチェックするチェックボタンを持っています。

現在のところ、現在のページにあるチェックボックスだけをチェックしたい場合は、チェックボックスをオンにしておきます。

https://jsfiddle.net/itsjustcarlos/u9d1ewsh/55/

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> 

とスクリプト

$(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);}); 
}); 


}); 

私はチェックボックスが表示されていたかいないかどうかチェック答えhereを見つけたので、私は仮定しています私はスタイルを入れなければなりません：非アクティブなページのものにはnoneを使い、ページがアクティブになったら削除してください：visble、しかし、私はthaを達成する方法がわかりませんt。

ありがとうございます。

Answer 1

チェックボックスの表示をチェックし、チェックボックスで表示されないものに制限することができます。

$('#master').change(function() { 
 
$('input').each(function(index, listItem) { 
 
     if(!$(this).is(":visible")){ 
 
      return false; 
 
     }else{ 
 
     $(this).prop("checked",true); 
 
     } 
 
    
 
    }); 
 
    setTimeout(function(){ 
 
     $('input').removeClass('hidden'); 
 
     $("#master").after('<p> some of were hidden are not selected</p>'); 
 
    }, 3000); 
 
});

.hidden{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="normal"><br> 
 
<input type="checkbox" class="normal"><br> 
 
<input type="checkbox" class="normal"><br> 
 
<input type="checkbox" class="normal"><br> 
 
<input type="checkbox" class="hidden"><br> 
 
<input type="checkbox" class="hidden"><br> 
 
<input type="checkbox" class="hidden"><br> 
 

 

 
<label>Select All of above </label> 
 
<input type="checkbox" id="master" class="normal">