Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

フォーム要素からの入力値を取得するには?(val)

2016年6月30日

valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン/チェックボックス/リストボックス(複数選択)の場合の注意点も示す。

  • このエントリーをはてなブックマークに追加

 <input><select><textarea>などのフォーム要素から値を取得するには、valメソッドを利用します(value、ではないので要注意です)。

 ではさっそく、valメソッドを利用して、フォーム要素の現在値を取得してみましょう。

HTML
<!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.html)
それぞれの要素の値をログに表示(右側:開発者ツールから確認)

 一見してシンプルなvalメソッドですが、フォーム要素によっては注意すべき点もあります。

1ラジオボタンの値を取得する場合

 ラジオボタンの値を取得するには、:checkedフィルターで選択状態にあるものを絞り込み、その値をvalメソッドで取得します。:checkedフィルターなしでは、常に先頭のオプションが返されますので、注意してください。

 また、ラジオボタンが選択されていない状態で値を取得すると、undefined(未定義値)が返されます。

23チェックボックスの値を取得する場合

 チェックボックスの値を取得する場合、まず単一のチェックボックスであれば、2のように:checkedフィルターで選択状態にあるものを絞り込み、その値をvalメソッドで取得するだけです。

 しかし、複数選択可能なチェックボックス群の場合は、そうはいきません(3)。というのも、valメソッドでは「取得した要素群の最初の1つの値だけを取り出す」という性質があるためです。

 そこで3のように取り出した要素セットをeachメソッドで順に取り出し、valメソッドで個々にアクセスしていく必要があります。

[Note]特定の項目がチェックされているかを確認する

 特定の項目がチェックされているかどうかを確認するならば、propメソッドを利用するのが便利です。

JavaScript
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]を参照してください。

jQuery逆引きリファレンス
46. 要素の表示位置を取得/設定するには?(offset)

offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得/設定する基本的な方法を説明する。

jQuery逆引きリファレンス
47. 親要素に対する相対的な表示位置を取得するには?(position)

positionメソッドを使って、要素の「親要素からの相対位置」を取得する基本的な方法を説明する。なお、設定はできない。

jQuery逆引きリファレンス
48. 【現在、表示中】≫ フォーム要素からの入力値を取得するには?(val)

valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン/チェックボックス/リストボックス(複数選択)の場合の注意点も示す。

jQuery逆引きリファレンス
49. ラジオボタン/チェックボックス/選択ボックスの選択テキストを取得するには?(val)

valメソッドを使って選択テキストを取得する方法を、ラジオボタン/チェックボックス/選択ボックス/リストボックスなどフォーム要素ごとに説明する。

jQuery逆引きリファレンス
50. フォーム要素に対して値を設定するには?(val)

valメソッドを使ってフォーム要素の値を設定する方法を説明。また、利用上の注意点や、値をクリアする方法、応用例として全てのチェックボックスを選択/解除する方法も示す。

サイトからのお知らせ

Twitterでつぶやこう!