Question

我有一个200行的表，分页为20页（每页10行）。这些行中的每一行都有一个复选框。我使用jPage所以所有表仍然存在，只有“display：none”隐藏。我编写了一个函数来选中所有复选框（附带一些先前的条件），如下所示：

$('#masterCbox').click(function () {
  if($(this).is(':checked')) {
    $('.childCbox').prop('checked', false);
    $('.select-y').children('.childtd').children('.childCbox').prop('checked', true);
  } else 
    $('.childCbox').prop('checked', false);
});

这将检查所有具有class =“select-y”的行。

但是，要求仅检查屏幕上的复选框（复选框属于显示页面的行）。我将如何实现这一目标？

Answer 1

您可以在JQuery中使用：visible选择器来查看某些内容是否可见。

Answer 2

检查它是否可见，并检查它是否在某个地方匹配.select-y，而不是所有children()内容：

$('#masterCbox').click(function () {
   if( this.checked ) {
       $('.childCbox').prop('checked', false).filter(function() {
           return $(this).is(':visible') && $(this).closest('.select-y').length;
       }).prop('checked', true);
  } else {
       $('.childCbox').prop('checked', false);
  }
});

Answer 3

您可以应用过滤器来检查您的行是否可见：

  $('.select-y').is(':visible').children('.childtd').children('.childCbox').prop('checked', true);

Answer 4

你可以这样做：

$('.select-y .childtd').children('.childCbox:visible').prop('checked', true);

Javascript：如何仅在屏幕上选中复选框

4 个答案: