JQuery Selector hidden

From CoderLearner
Jump to: navigation, search

Description

Select hidden elements.

Syntax

$(':hidden')

$('form input:hidden')

Note

  • CSS display as none is considered hidden
  • Form elements with the type="hidden"
  • Elements with width and height set to 0
  • An ancestor element is hidden so its children or content hidden.

Example 1

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Select</title>
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>

      <script>
         $().ready(function() {
            // script in the body is considered as hidden
            var thidden = $('body').find('form input:hidden').not('script').length;
            $('div').html(thidden);
         });
      </script>
   </head>
   <body> 
      <div></div>
      <form>
         <input type="hidden" name="test1" value="4444"/>
         <input type="hidden" name="test2" value="5544"/>
         <input type="text" name="uimage"/><br/>
         <input type="text" name="desc" id="check1"/><br/>
         <input type="text" name="yimage"/><br/>
         <input type="text" name="ydesc" id="make1"/><br/>
      </form>
   </body>
</html>

Try It