JQuery: how can I select only checked and marked checkboxes?

Question

I am trying to check if all visible checkboxes in a certain series are checked, and I thought to just count the visible ones and those that are visible and checked to check if these numbers match. The problem is that I cannot get visible and verified selectors to work.

Here are some of my ideas, but I did not 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 it 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: Sometimes what I am doing wrong is somewhere else. I did these checks before making the div containing the checkboxes visible so that all the visibility checks return false.

Answer 1

You can do something like this:

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; } 

Answer 2

This works great for me.

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

OR adapting the answer above.

jsfiddle

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

Answer 3

This is not true:

 if($j("input[id^='chk_camp']").filter(':visible').filter(':checked).length == $j("input[id^='chk_camp']).filter(':visible').length) // ------^------ missing qoutes here ----^--- also double quotes here