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;