CODEWITHSUNDEEP
jquery
clarkk
clarkk

Reputation: 27667

How to check if an input element is hidden?

How can you check if an input element is hidden?

Upvotes: 27

Views: 42474

Answers (4)

Itay Ben Shmuel
Itay Ben Shmuel

Reputation: 674

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

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

I hope it helps.

Upvotes: 2

devGirl
devGirl

Reputation: 58

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'

Upvotes: 0

nickf
nickf

Reputation: 545985

Hidden as type="hidden"

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

Hidden as display: none

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

Upvotes: 56

gion_13
gion_13

Reputation: 41533

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;

Upvotes: 17

Related Questions