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 =“有色”div可以是VISIBLE或HIDDEN。可以说，它是简单的过滤器，就像我想要只看到class =“color yellow”divs

现在问题的核心：我需要遍历整个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函数返回整个元素，我试过了 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;
    }
});

更简单的方法是使用@Tushar的推荐

Answer 3

您也可以使用$("#box").find(':checkbox').prop('checked',function(){ return $(this).is(':visible'); });函数参数：

Thread.currentThread().getContextClassLoader()

顺便说一下，取消选中任何隐藏的复选框（如果需要）。

Answer 4

这可以通过.filter()方法实现：

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

找到之后.is（“：visible”）

4 个答案: