jQuery:如何仅选择可见且已选中的复选框？

Question

我正在尝试检查是否选中了某个系列中的所有可见复选框，并且我想到只计算那些可见的复选框以及那些可见并检查的复选框以查看数字是否相同。问题是我无法让可见的选择器和已检查的选择器工作。

这些是我有但没有实现的一些想法:

if($j("input[id^='chk_camp']:visible:checked").length == $j("input[id^='chk_camp']:visible").length)

本例两边都是0

if($j("input[id^='chk_camp']").filter(':visible').filter(':checked').length == $j("input[id^='chk_camp']").filter(':visible').length)

两边也都返回0。

也尝试过

if($j("input[id^='chk_camp'][visible][checked]").length == $j("input[id^='chk_camp'][visible]").length)

两边都返回 0。

请注意 $j("input[id^='chk_camp']").length 返回正确的值。我使用的浏览器也是 Firefox。

我在这里做错了什么？

回答:显然我做错的是在其他地方。我在实际使包含复选框的 div 可见之前进行了这些检查，因此所有可见性检查都返回 false。

Answer 1

你可以这样做:

<强> jsfiddle

jQuery:

$('input').each(function() {

    // If input is visible and checked...
    if ( $(this).is(':visible') && $(this).prop('checked') ) {

        $(this).wrap('<div />');

    }

});

HTML:

<input type="checkbox" checked="checked">
<input type="checkbox" checked="checked" style="display: none;">
<input type="checkbox">
<input type="checkbox" checked="checked" style="display: none;">
<input type="checkbox" checked="checked">
<input type="checkbox">

CSS:

div { float: left; background: green; }
div input { display: block !important; }