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

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

hiddenのnameでvalue値を取得/設定する
hiddenのidでvalue値を取得/設定する

hiddenのnameでvalue値を取得/設定する

ボタンを押すとhiddenのvalueに値を設定し取得するサンプルです。
hiddenのnameを使用します。

hiddenの値：

コード

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

<p>hiddenの値：<span id="span1"></span></p>
<input type="hidden" name="test1" value="1">
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="クリア" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

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

	$("#button2").click(function() {
		$('input:hidden[name="test1"]').val(""); //クリア
		$("#span1").text("");
	});
});
</script>

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

セレクタ

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

hiddenのidでvalue値を取得/設定する

ボタンを押すとhiddenのvalueに値を設定し取得するサンプルです。
hiddenのidを使用します。

hiddenの値：

コード

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

<p>hiddenの値：<span id="span2"></span></p>
<input type="hidden" name="test2" value="1" id="hidden1">
<input type="button" id="button3" value="ボタン2" />
<input type="button" id="button4" value="クリア" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button3").click(function() {
		// 値を設定
		$("#hidden1").val("200");
		// 値を取得
		const str1 = $("#hidden1").val();
		$("#span2").text(str1);
	});

	$("#button4").click(function() {
		$("#hidden1").val(""); //クリア
		$("#span2").text("");
	});
});
</script>

2行目は、hiddenです。
12行目は、IDセレクタ(#hidden1)で対象を特定(2行目)しvalメソッドでvalue値を設定しています。
14行目は、IDセレクタ(#hidden1)で対象を特定(2行目)しvalメソッドでvalue値を取得しています。

セレクタ

以下は、上記コードで使用しているセレクタです。
　#hidden1・・・IDセレクタ
jQuery セレクタとセレクタの一覧

:hiddenセレクタ

jQueryの拡張セレクタです。
hiddenを選択します。
以下はjQueryサイトの:hiddenセレクタのページです。
http://api.jquery.com/hidden-selector/

val()メソッド

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

val(値)メソッド

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