How to check if an input element is hidden?

Hidden as type="hidden"

$("#myInputElement").attr('type') == 'hidden'

Hidden as display: none

$("#myInputElement").is(":hidden")

nickf is right, but that would have the same effect on an input that is hidden by style (style="display:none;") or by it's type attribute (type="hidden").
Consider the following html :

<input id="first" type="hidden" />
<input id="second" type="text" style="display:none;"/>

Both of the above inputs have the :hidden pseudoclass, but only one of them has the hidden type. Assuming that this is what you were looking for (because inputs are the only elements that can have a hidden type and you wanted to check if an input element is hidden, not just any other element), the right answer to you r question is to check the element's type attribute:

document.getElementById('first').getAttribute('type') == 'hidden';// true
// although this input is also hidden, it wouldn't pass the check
document.getElementById('second').getAttribute('type') == 'hidden';// false

and , of course, the jquery way :

$('#first').attr('type') == 'hidden';// true
$('#second').attr('type') == 'hidden';// false

If you only were interested in the plain visibility property, then the jquery pseudoclass does the trick :

$('#first').is(':hidden');
// or another way
$('#first:hidden').length != 0;

Tags:

Jquery