如何将 jquery 选择器仅应用于可见的复选框？

Question

我有以下代码检查 html table 列中的所有复选框

$('.selectAll').on('click', function (e) {
    if ($(this).is(':checked')) {
        $('input[type=checkbox][value=' + $(this).attr("id") + ']').prop('checked', true);
    } else {
        $('input[type=checkbox][value=' + $(this).attr("id") + ']').prop('checked', false);
    }
});

效果很好，除了在某些情况下 table 的某些行被隐藏，所以 在这些用例中，我不希望选中那些隐藏的复选框。

我怎样才能在上面的代码中包含可见性检查，以便它只检查可见的复选框。所以基本上我想在这一行中添加一个可见的补充：

 $('input[type=checkbox][value=' + $(this).attr("id") + ']').prop('checked', true);

Answer 1

您可以将 :visible 与 input 一起使用，例如

$('input:visible[type=checkbox][value=' + $(this).attr("id") + ']')

你也可以使用.filter()，这是一个例子

$('.selectAll').on('click', function (e) {
    var id = $(this).attr("id");
    $('input[type=checkbox]').filter(function(){
        return  $(this).is(':visible') && $(this).val() == id;
    }).prop('checked', this.checked);
});

Answer 2

使用：

 $('input[type=checkbox][value=' + $(this).attr("id") + ']:visible').prop('checked', true);

和

 $('input[type=checkbox][value=' + $(this).attr("id") + ']:visible').prop('checked', false);

Answer 3

最好小心 ":visible" ，因为带有 "visibility: hidden" 或 "opacity: 0" 的元素仍然被认为是可见的，因为它们在页面布局中仍然采用 space。

如果您确定这不会成为您的问题，那么 Milind 的建议是正确的。

 $('input[type=checkbox][value=' + $(this).attr("id") + ']:visible').prop('checked', true);

如何将 jquery 选择器仅应用于可见的复选框？

How can I apply jquery selector to only visible checkboxes?

jquery

visibility

jquery-selectors