.is（“：visible”）find

Question

检测复选框的可见性状态时出现问题，我想要求您的帮助。

我的页面，它看起来像一个dynamicaly加载部分：

<div id="box"> 

    <div class="colored"> 
    <input type="checkbox" value="f01" name="mycheckbox"> 
    <!-- some content --> 
    <div> 

    <div class="colored"> 
    <input type="checkbox" value="f02" name="mycheckbox"> 
    <!-- some content --> 
    <div> 

    <!-- .... --> 


</div> 

这表示，我们应该说，在一些库项目。每班=“彩色”div可以是可见或隐藏的。 可以说，这是简单的过滤器，就像我希望有明显的唯一一类=“有色黄”的div

而现在问题的核心： 我需要通过整个BOX元素循环，找到所有复选框后通过每个复选框，“问他”，如果它是可见的，如果是真的，检查他。

Unforunately，这不起作用：

function checkallfav() { 
    $("#box").find('input[type=checkbox]').each(function() { 
     if (this.is(":visible")) { 
      this.checked = true; 
     } 
    }); 
} 

//And this doesn't work as well 
function checkallfav() { 
    $("#box").find('input[type=checkbox]').is(":visible").each(function() { 
     this.checked = true; 
    }); 
} 

的问题是，FIND函数返回整个元素，我想 Console.debug（本）;并在萤火虫，响应是所有html元素

所以，请，任何人都有一个解决方案？

Answer 1

在复选框本身上使用:visible选择器。在选择器上使用:visible将只过滤可见元素，然后可以在这些复选框上直接使用prop。

$("#box").find('input[type=checkbox]:visible').prop('checked', true); 

的代码也可以缩短为

$('#box :checkbox:visible').prop('checked', true); 

Answer 2

这里this是指原生DOM对象，他们没有.is()功能的jQuery的功能，从而有jQuery对象使用。因此应该使用$(this).is(":visible")。

$("#box").find('input[type=checkbox]').each(function() { 
    if ($(this).is(":visible")) { 
     this.checked = true; 
    } 
}); 

更简单的方法来实现是通过使用@图莎尔的建议

Answer 3

你可以使用prop()函数的参数过：

$("#box").find(':checkbox').prop('checked',function(){ 
    return $(this).is(':visible'); 
}); 

这将由方式取消任何隐藏的复选框（如果需要） 。

Answer 4

这可以用.filter()方法来实现：

$("#box").find('input[type=checkbox]').filter(':visible').prop('checked', true);