How to check if an input element 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;

HTMLElement.hidden should return true if it owns the hidden attribute.

document.querySelector('h1').hidden === true

I hope it helps.

The getAttribute() method of the Element interface returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string);

for a hidden element, you can check the type attribute of element.

$('#myElement').getAttribute('type')=='hidden'