Question

希望得到这个问题的帮助，

我有几百行的表格，我已经添加了分页。在行上有复选框。我有一个checkall按钮，用于检查复选框列。

此时，我只想要检查当前页面上的复选框，可见的复选框保持未选中状态。

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并将其删除一旦页面变得活跃使用：可见，但我不知道如何实现。

提前致谢。

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">

仅在分页表上选择可见复选框

1 个答案: