jqueryでのhiddenの使い方｜選択される隠された要素もあわせて解説

jQuery

Javascript
プログラミング言語

公開日時: 2020-03-26 　更新日時: 2022-06-08

この記事でわかること

プロジェクト リーダー: visibilityプロパティを使うと、隠された要素の中の一部だけを表示するなどの小回りが効くんですよ。

プログラマー: なるほど…！

jqueryにおけるhiddenとhideとの違い

jqueryには要素の表示状態に関する機能がいくつかありますが、その中でも非表示な要素に対する機能としてhiddenとhideがあります。今回はhiddenとhideの違いやそれぞれの使い方について解説していきます。ぜひ、参考にしてください。

構文から見る違い

jqueryにおけるhiddenとはセレクタです。セレクタで要素を取得するときに：（コロン）に続けてhiddenを設定すると画面上で非表示になっている要素を選択することができます。

jqueryにおけるhideとはメソッドです。jquery要素にhideメソッドを使うことで要素を非表示にすることができます。

使い方から見る違い

hiddenセレクタは以下のように使います。


  // :hiddenのみを指定すると画面内の全ての非表示な要素を取得する
  let allHiddenItem = $(":hidden");
    
  // inputのような要素セレクタの後に:hiddenを指定すると指定した要素のうち非表示な要素を取得する
  let hiddenInputItem = $("input:hidden");

// :hiddenのみを指定すると画面内の全ての非表示な要素を取得する

let allHiddenItem = $(":hidden");

// inputのような要素セレクタの後に:hiddenを指定すると指定した要素のうち非表示な要素を取得する

let hiddenInputItem = $("input:hidden");

hideメソッドは以下のように使います。


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>jqueryでhideメソッドを使うサンプル</title>
</head>
<body>
  
  <div id="div_1">
    this is div_1
  </div>
  
  <!-- hide/showボタンで表示が切り替わる -->
  <div id="div_2">
    this is div_2
  </div>

  <div id="div_3">
    this is div_3
  </div>

  
  <input type="button" id="button_hide" value="hide"/>
  <input type="button" id="button_show" value="show"/>
  
  <script>
    
    $("#button_hide").click(function(){
      $("#div_2").hide(); // #div_2要素を非表示にする
    });

    $("#button_show").click(function(){
      $("#div_2").show(); // #div_2要素を表示する
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>jqueryでhideメソッドを使うサンプル</title>

</head>

<body>

this is div_1

</div>

this is div_2

</div>

this is div_3

</div>

$("#button_hide").click(function(){

$("#div_2").hide(); // #div_2要素を非表示にする

});

$("#button_show").click(function(){

$("#div_2").show(); // #div_2要素を表示する

});

</script>

</body>

</html>

hiddenを設定することによって選択される隠された要素3つ

hiddenセレクタは画面に表示されていない要素を取得することができます。表示されていない要素には、透明度・幅・高さが０である、編集フォームでtypeがhiddenである、CSS設定においてdisplayがnoneである、の3つのパターンがあります。

1：透明度・幅・高さが0である

CSSのwidth、heightプロパティなどで幅と高さを0に設定すると、その要素は画面に表示されなくなります。また、fadeOutメソッドを使うとアニメーションしながら要素を隠すことができ、その要素は透明度が0になり画面に表示されなくなります。hiddenセレクタではこれらの要素を取得することができます。

2：編集フォームでtypeがhiddenである

フォーム要素はtypeに設定した値によってさまざまなコントロールになりますが、typeにhiddenを設定すると画面に表示されないコントロールになります。hiddenセレクタではこの画面に表示されないコントロールを取得することができます。

3：css設定においてdisplayがnoneである

CSSのdisplayプロパティは要素の表示形式を決めるもので、blockやinline、inline-blockなどを設定できます。このdisplayプロパティにnoneを指定するとその要素は非表示になります。hiddenセレクタではこの非表示になった要素を取得することができます。

jqueryでのhiddenの使い方7つ

では、実際にjqueryでhiddenセレクタを使う方法について解説していきます。

hiddenセレクタの使い方としては、name属性を使った値の取得および設定、id属性を使った値の取得および設定、カンマ区切りで複数値の取得および設定があります。

これらについてサンプルコードを交えて説明します。また、hiddenと似た意味を持つvisibilityの使い方についても説明します。

1：nameを使用してhiddenに値を設定する方法

name属性を使用してhiddenな要素に値を設定します。サンプルコードは以下のようになります。


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>name属性を使用してhiddenなinput要素へ値を設定するサンプル</title>
</head>
<body>
  <div>
    hiddenなinput要素の値:<span id="display_value"></span>
  </div>
  
  <form>
    <input type="hidden" id="hidden_input_1" name="hidden-input-1" value="value1"/>
    <input type="button" id="button_get" value="設定"/>
    <input type="button" id="button_clear" value="クリア"/>
  </form>

  <script>
    $("#button_get").click(function(){
      // input要素のうち非表示なもので、nameが"hidden-input-1"の要素を取得し、valメソッドで値を設定する
      $('input:hidden[name="hidden-input-1"]').val('new Value');
      
      let hiddenValue = $('input:hidden[name="hidden-input-1"]').val();
      $("#display_value").text(hiddenValue);
    });
    
    $("#button_clear").click(function(){
      $("#display_value").text('');
    });
  </script>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>name属性を使用してhiddenなinput要素へ値を設定するサンプル</title>

</head>

<body>

<div>

hiddenなinput要素の値:<span id="display_value"></span>

</div>

<form>

</form>

$("#button_get").click(function(){

// input要素のうち非表示なもので、nameが"hidden-input-1"の要素を取得し、valメソッドで値を設定する

$('input:hidden[name="hidden-input-1"]').val('new Value');

let hiddenValue = $('input:hidden[name="hidden-input-1"]').val();

$("#display_value").text(hiddenValue);

});

$("#button_clear").click(function(){

$("#display_value").text('');

});

</script>

</body>

</html>

2：nameを使用してhiddenの値を取得する方法

name属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>name属性を使用してhiddenなinput要素から値を取得するサンプル</title>
</head>
<body>
  <div>
    hiddenなinput要素の値:<span id="display_value"></span>
  </div>
  
  <form>
    <input type="hidden" id="hidden_input_2" name="hidden-input-2" value="value2"/>
    <input type="button" id="button_get" value="取得"/>
    <input type="button" id="button_clear" value="クリア"/>
  </form>

  <script>
    $("#button_get").click(function(){
      // input要素のうち非表示なもので、nameが"hidden-input-1"の要素を取得し、valメソッドで値を取得する
      let hiddenValue = $('input:hidden[name="hidden-input-2"]').val();
      $("#display_value").text(hiddenValue);
    });
    
    $("#button_clear").click(function(){
      $("#display_value").text('');
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>name属性を使用してhiddenなinput要素から値を取得するサンプル</title>

</head>

<body>

<div>

hiddenなinput要素の値:<span id="display_value"></span>

</div>

<form>

</form>

$("#button_get").click(function(){

// input要素のうち非表示なもので、nameが"hidden-input-1"の要素を取得し、valメソッドで値を取得する

let hiddenValue = $('input:hidden[name="hidden-input-2"]').val();

$("#display_value").text(hiddenValue);

});

$("#button_clear").click(function(){

$("#display_value").text('');

});

</script>

</body>

</html>

3：idを使ってhiddenの値を設定する方法

id属性を使用してhiddenな要素の値を設定します。サンプルコードは以下のようになります。


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>id属性を使用してhiddenなinput要素へ値を設定するサンプル</title>
</head>
<body>
  <div>
    hiddenなinput要素の値:<span id="display_value"></span>
  </div>
  
  <form>
    <input type="hidden" id="hidden_input_3" name="hidden-input-3" value="value3"/>
    <input type="button" id="button_get" value="設定"/>
    <input type="button" id="button_clear" value="クリア"/>
  </form>

  <script>
    $("#button_get").click(function(){
      // idが"#hidden_input_3"の要素を取得し、valメソッドで値を設定する
      $("#hidden_input_3").val("new Value");
      
      let hiddenValue = $("#hidden_input_3").val();
      $("#display_value").text(hiddenValue);
    });
    
    $("#button_clear").click(function(){
      $("#display_value").text('');
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>id属性を使用してhiddenなinput要素へ値を設定するサンプル</title>

</head>

<body>

<div>

hiddenなinput要素の値:<span id="display_value"></span>

</div>

<form>

</form>

$("#button_get").click(function(){

// idが"#hidden_input_3"の要素を取得し、valメソッドで値を設定する

$("#hidden_input_3").val("new Value");

let hiddenValue = $("#hidden_input_3").val();

$("#display_value").text(hiddenValue);

});

$("#button_clear").click(function(){

$("#display_value").text('');

});

</script>

</body>

</html>

4：idを使ってhiddenの値を取得する方法

id属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>id属性を使用してhiddenなinput要素の値を取得するサンプル</title>
</head>
<body>
  <div>
    hiddenなinput要素の値:<span id="display_value"></span>
  </div>
  
  <form>
    <input type="hidden" id="hidden_input_4" name="hidden-input-4" value="value4"/>
    <input type="button" id="button_get" value="設定"/>
    <input type="button" id="button_clear" value="クリア"/>
  </form>

  <script>
    $("#button_get").click(function(){
      // idが"#hidden_input_4"の要素を取得し、valメソッドで値を取得する
      let hiddenValue = $("#hidden_input_4").val();
      $("#display_value").text(hiddenValue);
    });
    
    $("#button_clear").click(function(){
      $("#display_value").text('');
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>id属性を使用してhiddenなinput要素の値を取得するサンプル</title>

</head>

<body>

<div>

hiddenなinput要素の値:<span id="display_value"></span>

</div>

<form>

</form>

$("#button_get").click(function(){

// idが"#hidden_input_4"の要素を取得し、valメソッドで値を取得する

let hiddenValue = $("#hidden_input_4").val();

$("#display_value").text(hiddenValue);

});

$("#button_clear").click(function(){

$("#display_value").text('');

});

</script>

</body>

</html>

5：hiddenに配列をカンマ区切りで設定する方法

hiddenな要素に配列をカンマ区切りで設定します。サンプルコードは以下のようになります。


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>hiddenに配列をカンマ区切りで設定するサンプル</title>
</head>
<body>
  <div>
    hiddenなinput要素の値:<span id="display_value"></span>
  </div>
  
  <form>
    <input type="hidden" id="hidden_input_5" name="hidden-input-5" value="value5"/>
    <input type="button" id="button_get" value="設定"/>
    <input type="button" id="button_clear" value="クリア"/>
  </form>

  <script>
    $("#button_get").click(function(){
      // hiddenな要素にvalメソッドで配列を値として設定することができる
      $("#hidden_input_5").val(["red", "blue", "green"]);

      // valメソッドで配列を値として設定するとカンマ区切りの値で保存される
      let hiddenValue = $("#hidden_input_5").val();
      $("#display_value").text(hiddenValue);
    });
    
    $("#button_clear").click(function(){
      $("#display_value").text('');
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>hiddenに配列をカンマ区切りで設定するサンプル</title>

</head>

<body>

<div>

hiddenなinput要素の値:<span id="display_value"></span>

</div>

<form>

</form>

$("#button_get").click(function(){

// hiddenな要素にvalメソッドで配列を値として設定することができる

$("#hidden_input_5").val(["red", "blue", "green"]);

// valメソッドで配列を値として設定するとカンマ区切りの値で保存される

let hiddenValue = $("#hidden_input_5").val();

$("#display_value").text(hiddenValue);

});

$("#button_clear").click(function(){

$("#display_value").text('');

});

</script>

</body>

</html>

6：カンマ区切りのhiddenデータを配列として取得する方法

カンマ区切りのhiddenな要素の値を配列として取得します。サンプルコードは以下のようになります。


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>hiddenのカンマ区切りの値を配列として取得するサンプル</title>
</head>
<body>
  <div>
    hiddenなinput要素の値:<span id="display_input_value"></span>
  </div>
  <div>
    取得した配列:<span id="display_get_value"></span>
  </div>
  
  <form>
    <input type="hidden" id="hidden_input_6" name="hidden-input-6" value="red,green,blue"/>
    <input type="button" id="button_get" value="設定"/>
    <input type="button" id="button_clear" value="クリア"/>
  </form>

  <script>
    $("#button_get").click(function(){
      // 配列を値として設定した要素から値を取得するとカンマ区切りの値で取得される
      let hiddenValue = $("#hidden_input_6").val();
      // カンマ区切りの値を配列にするにはsplitメソッドを使用する
      let splitted = hiddenValue.split(",");
      
      $("#display_input_value").text(JSON.stringify(hiddenValue));
      $("#display_get_value").text(JSON.stringify(splitted));
    });
    
    $("#button_clear").click(function(){
      $("#display_input_value").text("");
      $("#display_get_value").text("");
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>hiddenのカンマ区切りの値を配列として取得するサンプル</title>

</head>

<body>

<div>

hiddenなinput要素の値:<span id="display_input_value"></span>

</div>

<div>

取得した配列:<span id="display_get_value"></span>

</div>

<form>

</form>

$("#button_get").click(function(){

// 配列を値として設定した要素から値を取得するとカンマ区切りの値で取得される

let hiddenValue = $("#hidden_input_6").val();

// カンマ区切りの値を配列にするにはsplitメソッドを使用する

let splitted = hiddenValue.split(",");

$("#display_input_value").text(JSON.stringify(hiddenValue));

$("#display_get_value").text(JSON.stringify(splitted));

});

$("#button_clear").click(function(){

$("#display_input_value").text("");

$("#display_get_value").text("");

});

</script>

</body>

</html>

7：hiddenと似た意味を持つvisibilityプロパティの使い方

visibilityプロパティは、要素の表示形式を変更できるCSSのプロパティの一つです。visibilityプロパティでは、以下のような値を使ってjqueryの中で次のように記述します。
■要素を表示
要素名.style.visibility = “visible”;

■要素の非表示
要素名.style.visibility = “hidden”;

■要素を詰めて非表示
要素名.style.visibility = “collapse”;

同じように表示・非表示を切り替えるプロパティに [display: none] が挙げられますが、displayプロパティは要素分の領域を詰めるのに対し、visibilityプロパティでは要素分の領域を確保するため、レイアウトが崩れにくいというメリットがあります。

ただし、一点注意点として“Internet Explorerには対応していない”ということを覚えておきましょう。

＜補足＞
Internet Explorer（IE）は、今回のvisibilityプロパティをはじめ他のプロパティなどにも対応していないことが多いです。開発を行う環境としてIEは優れていないため、もし現在IEを使用しているのであれば他のブラウザに切り替えることをおすすめします。

visibilityプロパティを使って表示・非表示を切り替えてみよう

ここでは、実際にvisibilityプロパティを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。


<script>
// ロゴを可視
     function visible(){
        var logo1 = document.getElementById("limitedLogo");
        logo1.style.visibility = "visible";
     }
     // ロゴを不可視
     function unvisible(){
        var logo1 = document.getElementById("limitedLogo");
        logo1.style.visibility = "hidden";
     }
</script>

// ロゴを可視

function visible(){

var logo1 = document.getElementById("limitedLogo");

logo1.style.visibility = "visible";

}

// ロゴを不可視

function unvisible(){

var logo1 = document.getElementById("limitedLogo");

logo1.style.visibility = "hidden";

}

</script>


<div class="logo_disp">
    <img id="limitedLogo" class="logo" src="logo.png"><br/>
    <div>
      <input type="button" value="表示" onclick="visible();"/>
       <input type="button" value="非表示" onclick="unvisible();"/>
   </div>
</div>

<div>

</div>

実行すると、次のような結果になります。

では、真ん中のロゴを非表示にしてみましょう。

すると・・・

ロゴは非表示となっていますが、ロゴがあった場所は残っていることが分かりますね。これがvisibilityプロパティの最大の特徴です。ちなみにvisibilityプロパティを使わずに [display] プロパティを使うと、次のような表示となります。

jqueryでhiddenを使うときの注意点

:hiddenセレクタはjqueryの拡張機能であり、CSSの仕様には含まれていないセレクタです。このため、他セレクタと比べると処理が若干重くなります。

対処法としてはCSSのセレクタで要素を選択したのちにトラバースのfilterメソッドで再度絞り込むようにする方法があります。

プロジェクト リーダー: このように、それぞれのプロパティやメソッドの特徴を知っておくと、ウェブページを作成するときにも役立ちますよ。

プログラマー: 分かりました！

必要に応じてhiddenやvisibilityプロパティを活用していこう

jQueryでは表示・非表示を切り替えるためのさまざまなプロパティやメソッドが用意されているため、比較的visibilityプロパティの出番は少ないかもしれません。しかし、“要素分の領域を確保したまま非表示にできる”という特徴があるなど、使い方によっては非常に便利なプロパティなので、ぜひ上手く活用してみてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jqueryでのhiddenの使い方｜選択される隠された要素もあわせて解説

jqueryにおけるhiddenとhideとの違い

構文から見る違い

使い方から見る違い

hiddenを設定することによって選択される隠された要素3つ

1：透明度・幅・高さが0である

2：編集フォームでtypeがhiddenである

3：css設定においてdisplayがnoneである

jqueryでのhiddenの使い方7つ

1：nameを使用してhiddenに値を設定する方法

2：nameを使用してhiddenの値を取得する方法

3：idを使ってhiddenの値を設定する方法

4：idを使ってhiddenの値を取得する方法

5：hiddenに配列をカンマ区切りで設定する方法

6：カンマ区切りのhiddenデータを配列として取得する方法

7：hiddenと似た意味を持つvisibilityプロパティの使い方

visibilityプロパティを使って表示・非表示を切り替えてみよう

jqueryでhiddenを使うときの注意点

必要に応じてhiddenやvisibilityプロパティを活用していこう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jqueryでのhiddenの使い方｜選択される隠された要素もあわせて解説

jqueryにおけるhiddenとhideとの違い

構文から見る違い

使い方から見る違い

hiddenを設定することによって選択される隠された要素3つ

1：透明度・幅・高さが0である

2：編集フォームでtypeがhiddenである

3：css設定においてdisplayがnoneである

jqueryでのhiddenの使い方7つ

1：nameを使用してhiddenに値を設定する方法

2：nameを使用してhiddenの値を取得する方法

3：idを使ってhiddenの値を設定する方法

4：idを使ってhiddenの値を取得する方法

5：hiddenに配列をカンマ区切りで設定する方法

6：カンマ区切りのhiddenデータを配列として取得する方法

7：hiddenと似た意味を持つvisibilityプロパティの使い方

visibilityプロパティを使って表示・非表示を切り替えてみよう

jqueryでhiddenを使うときの注意点

必要に応じてhiddenやvisibilityプロパティを活用していこう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryでCSSのスタイルを変更する方法

jQuery UIのダウンロードの手順と使い方

jQueryのタグ追加方法とタグの種類

jQueryで要素の表示と非表示を行う方法その1【display none】

【jQueryが動かない】Chromeのデベロッパーツールで原因を見つける方法