jQuery: how can I select only the checkboxes that are visible and checked?

Question

I'm trying to check whether or not all the visible check boxes in a certain series are checked and i thought of just counting those that are visible and those that are visible and checked to see if the numbers are the same. The problem is I can't get the visible nor the checked selectors to work.

These are some of the ideas I had but didn't work:

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

both sides are 0 in this case

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

also returned 0 on both sides.

Also tried

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

and this also returns 0 on both sides.

As a note $j("input[id^='chk_camp']").length returns the correct value. Also the browser I'm working with is Firefox.

What am I doing wrong here?

Answer: Aparently what I'm doing wrong is somewhere else. I was doing these checks before actually making the div containing the checkboxes visible so all the visibility checks were returning false.

Answer 1

This works fine for me.

$(".inputClass:checked:visible");
$(".inputClass:checked:visible").length;

OR adapting the above answer.

jsfiddle

$('input:visible:checked').each(function() {
    $(this).wrap('<div />');
});