Question

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

$('.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);
    }
});

除非在某些情况下表的某些行被隐藏，所以在这些用例中我不想要检查那些隐藏的复选框。

如何在上面的代码中包含可见性检查，以便只检查可见的复选框。所以基本上我想在这一行添加一个可见的添加：

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

Answer 1

使用：

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

和

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

Answer 2

您可以将: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 3

最好小心“：visible”，因为“visibility：hidden”或“opacity：0”的元素仍然被认为是可见的，因为它们仍占用页面布局中的空间。

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

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

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

3 个答案: