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

i'm trying check whether or not visible check boxes in series checked , thought of counting visible , visible , checked see if numbers same. problem can't visible nor checked selectors work.

these of ideas had didn't work:

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

both sides 0 in 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 returns 0 on both sides.

as note $j("input[id^='chk_camp']").length returns correct value. browser i'm working firefox.

what doing wrong here?

answer: aparently i'm doing wrong somewhere else. doing these checks before making div containing checkboxes visible visibility checks returning false.

you this:

jsfiddle

jquery:

$('input').each(function() {      // if input visible , 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; }