jQuery逆引きリファレンス
フォーム要素からの入力値を取得するには？（val）
valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン／チェックボックス／リストボックス（複数選択）の場合の注意点も示す。
<input>、<select>、<textarea>などのフォーム要素から値を取得するには、valメソッドを利用します（value、ではないので要注意です）。
ではさっそく、valメソッドを利用して、フォーム要素の現在値を取得してみましょう。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<p>
<label for="name">氏名：</label><br />
<input type="text" id="name" name="name" size="30" />
</p>
<p>
血液型：<br />
<input type="radio" id="a" name="blood" value="a" />
<label for="a">A型</label>
<input type="radio" id="b" name="blood" value="b" />
<label for="b">B型</label>
<input type="radio" id="o" name="blood" value="o" />
<label for="o">O型</label>
<input type="radio" id="ab" name="blood" value="ab" />
<label for="ab">AB型</label>
</p>
<p>
<label for="married">既婚？：</label><br />
<input type="checkbox" id="married" name="married" value="1" />
</p>
<p>
利用しているOS：<br />
<input type="checkbox" id="win" name="os" value="Windows" />
<label for="win">Windows</label>
<input type="checkbox" id="lin" name="os" value="Linux" />
<label for="lin">Linux</label>
<input type="checkbox" id="mac" name="os" value="OS X" />
<label for="mac">Mac OS X</label>
</p>
<p>
<label for="sex">性別：</label><br />
<select id="sex" name="sex">
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">その他</option>
</select>
<p>
<label for="pet">ペット：</label><br />
<select id="pet" name="pet" multiple>
<option value="dog">いぬ</option>
<option value="cat">ねこ</option>
<option value="other">その他</option>
</select>
</p>
<p>
<label for="memo">趣味／特技：</label><br />
<textarea id="memo" name="memo" cols="30" row="5"></textarea>
</p>
<button type="button" id="btn">クリック</button>
</form>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function () {
$('#btn').click(function() {
// テキストボックス
console.log('テキストボックス：');
console.log($('#name').val()); // 結果：山田太郎
// ラジオボタン1
console.log('ラジオボタン：');
console.log($('[name="blood"]:checked').val()); // 結果：o
// チェックボックス（単一）2
console.log('チェックボックス（単一）：');
console.log($('[name="married"]:checked').val()); // 結果：1
// チェックボックス（複数）3
console.log('チェックボックス（複数）：');
$('[name="os"]:checked').each(function() {
console.log($(this).val()); // 結果：Windows、OS X
});
// 選択ボックス
console.log('選択ボックス：');
console.log($('#sex').val()); // 結果：female
// リストボックス（複数選択）4
console.log('リストボックス：');
console.log($('#pet').val()); // 結果：["cat", "other"]
// テキストエリア
console.log('テキストエリア：');
console.log($('#memo').val()); // 結果：海釣りが趣味です。～
})
});
</script>
</body>
</html>
|
一見してシンプルなvalメソッドですが、フォーム要素によっては注意すべき点もあります。
1ラジオボタンの値を取得する場合
ラジオボタンの値を取得するには、:checkedフィルターで選択状態にあるものを絞り込み、その値をvalメソッドで取得します。:checkedフィルターなしでは、常に先頭のオプションが返されますので、注意してください。
また、ラジオボタンが選択されていない状態で値を取得すると、undefined（未定義値）が返されます。
23チェックボックスの値を取得する場合
チェックボックスの値を取得する場合、まず単一のチェックボックスであれば、2のように:checkedフィルターで選択状態にあるものを絞り込み、その値をvalメソッドで取得するだけです。
しかし、複数選択可能なチェックボックス群の場合は、そうはいきません（3）。というのも、valメソッドでは「取得した要素群の最初の1つの値だけを取り出す」という性質があるためです。
そこで3のように取り出した要素セットをeachメソッドで順に取り出し、valメソッドで個々にアクセスしていく必要があります。
［Note］特定の項目がチェックされているかを確認する
特定の項目がチェックされているかどうかを確認するならば、propメソッドを利用するのが便利です。
|
if($('[name="married"]').prop('checked')) {
console.log('チェックされています。');
};
|
4リストボックス（複数選択）の値を取得する場合
multiple属性付きのリストボックス（複数選択）では、valメソッドは配列を返します。チェックボックスの場合と異なり、eachメソッドで個々のオプションを取得する必要はありません。
未選択の場合には、戻り値はnullとなります。
API：.val() カテゴリ：Attributes（属性）｜Forms（フォーム）｜Manipulation（操作） > General Attributes（一般属性）
API：:checkedフィルター カテゴリ：Selectors（セレクター） > Form（フォーム）
API：.prop() カテゴリ：Attributes（属性）｜Manipulation（要素の操作） > General Attributes（一般属性）
※以下では、本稿の前後を合わせて5回分（第46回～第50回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
48. 【現在、表示中】≫ フォーム要素からの入力値を取得するには？（val）
valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン／チェックボックス／リストボックス（複数選択）の場合の注意点も示す。
49. ラジオボタン／チェックボックス／選択ボックスの選択テキストを取得するには？（val）
valメソッドを使って選択テキストを取得する方法を、ラジオボタン／チェックボックス／選択ボックス／リストボックスなどフォーム要素ごとに説明する。
50. フォーム要素に対して値を設定するには？（val）
valメソッドを使ってフォーム要素の値を設定する方法を説明。また、利用上の注意点や、値をクリアする方法、応用例として全てのチェックボックスを選択／解除する方法も示す。
