javascript - .is (":visible") 找到后

Question

我在检测复选框的可见性状态时遇到问题，需要您的帮助。

我有一个动态加载的页面部分，如下所示:

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

我们可以说，这代表了某个画廊中的项目。每个 class="colored"div 都可以是可见的或隐藏的。 可以说，这是一个简单的过滤器，就像我只想让 class="colored Yellow"div 可见

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

不幸的是，这不起作用:

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 函数返回整个元素，我尝试过 控制台.调试(这个)；在 firebug 中，响应都是 html 元素

请问有人有解决办法吗？

Answer 1

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

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

代码也可以缩短为

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