title: Using jQuery to select items that have style "visibility:visible" or "visibility:hidden" NOT "display: none"
body: <p>How do you select only visible elements using jQuery?</p>
  
  <p>jQuery selectors :visible and :hidden only respects display:none as <em>really</em> hidden? NOT visibility:hidden or visibility:visible.</p>
  
  <p>I understand they are not technically hidden <a href="https://stackoverflow.com/questions/1160196/why-does-jquery-show-hide-use-displaynone-instead-of-visibilityhidden">because they still take their space</a>. I just want to know their state so I can check checkboxes that are visible.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;jQuery :visiblity Selector Test&lt;/title&gt;
  
  &lt;script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("#VisibleCount").text($("input[type=checkbox]:visible").length); //returns 3. I think it should be 2
          $("#HiddenCount").text($("input[type=checkbox]:hidden").length); //returns 1. I think it should be 2
      });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      #TestArea
      {
          border: solid red 1px;
      }
      #Results
      {
          background-color: Lime;
      }
      .container
      {
          border: solid black 1px;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="TestArea"&gt;
      &lt;div class="container"&gt;
          visibility: hidden;&lt;div style="visibility: hidden;"&gt;
              &lt;input id="Checkbox1" type="checkbox" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          visibility: visible;&lt;div style="visibility: visible;"&gt;
              &lt;input id="Checkbox2" type="checkbox" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          display: none;&lt;div style="display: none;"&gt;
              &lt;input id="Checkbox3" type="checkbox" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          display: inline;&lt;div style="display: inline;"&gt;
              &lt;input id="Checkbox4" type="checkbox" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="Results"&gt;
      &lt;div&gt;
          Visible Count: &lt;span id="VisibleCount"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          Hidden Count: &lt;span id="HiddenCount"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>