jQuery テキストボックスの値を取得/設定するサンプル

jQueryのテキストボックスの値を取得/設定するサンプルです。

コード

以下の4つのサンプルがあります。

No 説明
値を設定
13行目は、inputセレクタと:textセレクタとnameの名称で対象を特定(35行目)しvalメソッドでvalue値を設定しています。
値を取得
15行目は、inputセレクタと:textセレクタとnameの名称で対象を特定(35行目)しvalメソッドでvalue値を取得しています。
値を設定
21行目は、IDセレクタ(#txt1)で対象を特定(35行目)しvalメソッドでvalue値を設定しています。
値を取得
23行目は、IDセレクタ(#txt1)で対象を特定(35行目)しvalメソッドでvalue値を取得しています。
- 以下は、サンプルコードで使用しているセレクタです。
 inputセレクタ・・・要素セレクタ
 :textセレクタ・・・jQueryの拡張セレクタ
 [name="test1"]・・・属性セレクタ
 #txt1・・・IDセレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryテキストボックスのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var str1;
	// ボタン1が押されたときの動作
	$("#b1").click(function() {
		// 1.値を設定
		$('input:text[name="test1"]').val("100");
		// 2.値を取得
		str1 = $('input:text[name="test1"]').val();
		$("#sp1").text(str1);
	});
	// ボタン2が押されたときの動作
	$("#b2").click(function() {
		// 3.値を設定
		$('#txt1').val("200");
		// 4.値を取得
		str1 = $('#txt1').val();
		$("#sp1").text(str1);
	});
});
</script>
</head>
<body >
<p>セットした値 <span id="sp1"></span></p>
<input type="text" name="test1" value="1" id="txt1" maxlength="5"><br/><br/>
<input type="button" id="b1" value="ボタン1" /><br/>
<input type="button" id="b2" value="ボタン2" />
</body>
</html>

サンプル

上記コードのサンプルです。 
ボタン1を押すと、テキストボックスにvalメソッドで値(100)をセットして表示します。
ボタン2を押すと、テキストボックスにvalメソッドで値(200)をセットして表示します。

セットした値


:textセレクタ

val()メソッド

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

val(value)メソッド

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

IDセレクタ

関連の記事

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




△上に戻る