Databases
StackOverflow2013
Postsdbo
POUsing jQuery to select items that have style "visibility:visible" or "visibility:hidden" NOT "display: none"
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing jQuery to select items that have style "visibility:visible" or "visibility:hidden" NOT "display: none"
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload