jQuery hiddenの値を取得/設定するサンプル

nas2017/04/30

目次

01. hidden

・hiddenの値を取得する(idを使用)

・hiddenに値を設定する(idを使用)

・hiddenの値を取得する(nameを使用)

・hiddenに値を設定する(nameを使用)

・hiddenのカンマ区切りのデータを配列にする

・配列をカンマ区切りでhiddenにセットする

hiddenの値を取得する(idを使用)

idを使用して、hiddenの値を取得するサンプルです。

色

 

上記サンプルのコードです。

<p>色 <span id="span3"></span></p>
<input type="hidden" value="red" id="hidden3">
<input type="button" id="button5" value="ボタン3" />
<input type="button" id="button6" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button5").click(function() {
		// 値を取得
		const str1 = $("#hidden3").val(); // hiddenの値を取得
		$("#span3").text(str1); // spanタグに値を設定
	});
	$("#button6").click(function() {
		$("#span3").text(""); // クリア
	});

</script>

2行目は、hiddenです。
10行目は、IDセレクタ(#hidden3)で対象を特定(2行目)しvalメソッドでvalue値を取得しています。
11行目は、value値を画面に表示しています。

 

hiddenに値を設定する(idを使用)

idを使用して、hiddenの値を設定するサンプルです。

色

 

上記サンプルのコードです。

<p>色 <span id="span4"></span></p>
<input type="hidden" value="" id="hidden4">
<input type="button" id="button7" value="ボタン4" />
<input type="button" id="button8" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button7").click(function() {
		// 値を設定
		$("#hidden4").val("green"); // hiddenに値を設定
		$("#span4").text($("#hidden4").val());//hiddenの値をspanタグに設定
	});
	$("#button8").click(function() {
		$("#hidden4").val(""); // クリア
		$("#span4").text(""); // クリア
	});

</script>

2行目は、hiddenです。
10行目は、IDセレクタ(#hidden4)で対象を特定(2行目)しvalメソッドでvalue値を設定しています。
11行目は、value値を画面に表示しています。

 

hiddenの値を取得する(nameを使用)

nameを使用して、hiddenの値を取得するサンプルです。

色

 

上記サンプルのコードです。

<p>色 <span id="span1"></span></p>
<input type="hidden" name="hidden1" value="red">
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		// 値を取得
		const str1 = $('input:hidden[name="hidden1"]').val();
		$("#span1").text(str1);
	});
	$("#button2").click(function() {
		$("#span1").text("");
	});

</script>

2行目は、hiddenです。
10行目は、inputセレクタと:hiddenセレクタとnameの名称で対象を特定(2行目)しvalメソッドでvalue値を取得しています。
11行目は、value値を画面に表示しています。

 

hiddenに値を設定する(nameを使用)

nameを使用して、hiddenの値を設定するサンプルです。

色

 

上記サンプルのコードです。

<p>色 <span id="span2"></span></p>
<input type="hidden" name="hidden2" value="">
<input type="button" id="button3" value="ボタン2" />
<input type="button" id="button4" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button3").click(function() {
		// 値を設定
		$('input:hidden[name="hidden2"]').val("blue");
		$("#span2").text(
			$('input:hidden[name="hidden2"]').val());
	});
	$("#button4").click(function() {
		$('input:hidden[name="hidden2"]').val("");
		$("#span2").text("");
	});

</script>

2行目は、hiddenです。
10行目は、inputセレクタと:hiddenセレクタとnameの名称で対象を特定(2行目)しvalメソッドでvalue値を設定しています。
11行目は、value値を画面に表示しています。

セレクタ

以下は、上記コードで使用しているセレクタです。
　inputセレクタ・・・要素セレクタ
　:hiddenセレクタ・・・jQueryの拡張セレクタ
　[name="test1"]・・・属性セレクタ　
CSS 属性セレクタのサンプル(要素名[属性名=”値”])
jQuery 書き方・セレクタのサンプル(変数/AND/OR)

 

hiddenのカンマ区切りのデータを配列にする

hiddenのカンマ区切りのデータを配列にするサンプルです。

<input type="hidden" value="赤,黄,青" id="hidden1">
<input type="button" id="button1" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

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

		const str1 = $("#hidden1").val();

		const a = str1.split(",");

		console.log(a); // ["赤", "黄", "青"] 配列
	});

</script>

1行目は、hiddenの値がカンマ区切りで入っています。
8行目は、hiddenの値を取得しています。
10行目は、splitメソッドで配列にしています。

 

配列をカンマ区切りでhiddenにセットする

配列をカンマ区切りでhiddenにセットするサンプルです。

<input type="hidden" value="" id="hidden1">
<input type="button" id="button1" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

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

		const a = ["赤","黄","青"];

		$("#hidden1").val(a);

		console.log($("#hidden1").val()); // 赤,黄,青
	});

</script>

8行目は、配列です。
10行目は、配列をhiddenにセットしています。カンマ区切りでセットされます。
12行目は、hiddenの値を確認しています。

 

:hiddenセレクタ

val()メソッド

  • jQueryのメソッドです。
  • val()は、valueの値を返します。
  • 以下はjQueryサイトの.val()メソッドのページです。
    http://api.jquery.com/val/

val(値)メソッド

  • jQueryのメソッドです。
  • val(値)は、valueに値をセットします。
  • 以下はjQueryサイトの.val(value)メソッドのページです。
    http://api.jquery.com/val/#val2

関連の記事

CSS 属性セレクタのサンプル(要素名[属性名="値"])
jQuery ラジオボタンの値を取得/設定するサンプル
jQuery チェックボックスの値を取得/設定する
jQuery セレクトボックスの値を取得/設定する
jQuery テキストボックスの値を取得/設定する
jQuery テキストエリアの値を取得/設定する
JavaScript hiddenの値を取得/設定する

△上に戻る