jQuery APIリファレンスDOM要素の属性：値
val()
最初にマッチした要素のvalue属性の値をを取得
2009/2/27
val() 戻り値：文字列、配列
最初にマッチした要素のvalue属性の値を取得します。
jQuery v1.2では、現在、select要素を含むすべての要素の値を返します。 複数選択型のselect要素の場合は、値の配列を返します。
select要素とチェックボックスは、:selectedと:checkedセレクタを参照してください。
例：
$('select#foo option:selected').val(); /* select要素から値を取得 */
$('input:checkbox:checked').val(); /* チェックの入ったチェックボックスの値を取得 */
$('input:radio[name=bar]:checked').val(); /* ラジオボタンの値を取得 */
例：フォームの値変換
テキスト入力欄にフォーカスを当てると、デフォルトで表示しているヒントテキストが非表示になり、フォーカスを外すと、何も入力していない場合はデフォルトのヒントテキストが再度表示します。
val()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：値（Value）：val()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var swapValues = [];
$(".swap_value").each(function(i){
swapValues[i] = $(this).val();
$(this).focus(function(){
if ($(this).val() == swapValues[i]) {
$(this).val("");
}
}).blur(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swapValues[i]);
}
});
});
});
</script>
<style type="text/css">
input { width:23em; }
</style>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：値（Value）：val()の使用例 | jQuery</h1>
<!-- CODE -->
<p>
▼テキスト入力欄にフォーカスを当てると、デフォルトで表示しているヒントテキストが非表示になります。<br>
フォーカスを外すと、何も入力していない場合はデフォルトのヒントテキストが再度表示されます。
</p>
<form action="#">
<p><label for="user_name"> 名前：</label><input type="text" id="user_name" class="swap_value" value="あなたの名前を入力してください"></p>
<p><label for="user_kana">ナマエ：</label><input type="text" id="user_kana" class="swap_value" value="あなたの名前のフリガナを入力してください"></p>
</form>
<!-- CODE / -->
</div>
</body>
</html>
単一・複数選択型のプルダウンの選択されている値を取得
単一選択型プルダウンから選択されている1つの値を取得します。
複数選択型プルダウンの場合は、選択されている値の配列を返します。
val()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：値（Value）：val()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sample select").change(displayVals);
displayVals();
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("#res").html("<strong>Single：</strong> " + singleValues + "<br><strong>Multiple：</strong>" + multipleValues.join(", "));
}
});
</script>
<style type="text/css">
input { width:23em; }
#sample p { color:red; margin:4px; }
#sample strong { color:blue; }
#sample select { width:10em; }
</style>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：値（Value）：val()の使用例 | jQuery</h1>
<!-- CODE -->
<p>
▼単一選択型プルダウンから選択されている1つの値を取得します。<br>
複数選択型プルダウンの場合は、選択されている値の配列を返します。
</p>
<form action="#" id="sample">
<p id="res"></p>
<p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
</p>
<p>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
</p>
</form>
<!-- CODE / -->
</div>
</body>
</html>
val(val)
マッチした各要素のvalue属性を設定
2009/2/27
val(val) 戻り値：jQuery
マッチした各要素のvalue属性を設定します。
jQuery v1.2からは、select要素の値を設定することが可能です。
第1引数valには、マッチした要素に設定する値を指定します。
val(val)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：値（Value）：val(val)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
});
</script>
<style type="text/css">
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：値（Value）：val(val)の使用例 | jQuery</h1>
<p>▼テキストフィールドに値を設定します。</p>
<!-- CODE -->
<p>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</p>
<p><input type="text" value="click a button" /></p>
<!-- CODE / -->
</div>
</body>
</html>
val(val)
指定した値のセットとマッチするラジオボタン、チェックボックス、プルダウンメニューをすべて選択あるいはチェック
2009/2/27
val(val) 戻り値：jQuery
指定した値のセットとマッチするラジオボタン、チェックボックス、プルダウンメニューをすべて選択あるいはチェックします。
第1引数valには、選択あるいはチェックする値のセットを指定します。
val(val)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：値（Value）：val(val)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* ID名がsingleのプルダウンメニューで値が「Single2」のoption要素を選択 */
$("#single").val("Single2");
/* ID名がmultipleのプルダウンメニューで値が「Multiple2」と「Multiple3」のoption要素を選択 */
$("#multiple").val(["Multiple2", "Multiple3"]);
/* 値が「check1」と「check2」と「radio1」のinput要素を選択 */
$("input").val(["check1","check2", "radio1" ]);
});
</script>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：値（Value）：val(val)の使用例 | jQuery</h1>
<p>▼単一選択と複数選択を設定します。</p>
<!-- CODE -->
<p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
</p>
<p>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
</p>
<!-- CODE / -->
</div>
</body>
</html>
