jQuery逆引きリファレンス

jQuery逆引きリファレンス

フォーム要素に対して値を設定するには?(val)

2016年7月28日

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

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

 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>
</form>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function() {
  $('#name').val(['山田太郎']);
  $('[name="blood"]').val(['o']);
  $('[name="married"]').val(['1']);
  $('[name="os"]').val(['Windows', 'Linux']);
  $('#sex').val('female');
  $('#pet').val(['dog', 'cat']);
  $('#memo').val(['海釣りが趣味です。\n休みの日は、朝早くから車を飛ばして海に出かけます。']);
});
</script>
</body>
</html>
フォーム要素に対して値を設定するためのコード(form.html)
それぞれの要素に対して値が設定された
それぞれの要素に対して値が設定された

 テキストボックスなどの設定は一目瞭然ですが、ラジオボタン/チェックボックス/リストボックス(複数選択)などの要素については要注意です。というのも、これらの要素では、選択すべき値は配列として渡す必要があります。スカラー値として渡した場合には、正しく設定されませんので注意してください。

 また、ラジオボタン/チェックボックスの値をクリアする場合には、propメソッドを利用します。

JavaScript
$('[name="blood"]').prop('checked', false);
propメソッドで各ラジオボタンの値をクリア

チェックボックスの値を全選択/全解除する

 応用パターンとして、チェックボックスのリストを全て選択/解除するためのボタンを作成してみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
  <input id="all" type="checkbox" />
  <label for="all">全選択/解除</label><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>
</form>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function() {
  $('#all').change(function() {
    $('[name="os"]').prop('checked', $(this).prop('checked'));
  });
});
</script>
</body>
</html>
チェックボックスリストに値の全選択/全解除機能を実装(check_all.html)
[全選択/解除]チェックでチェックボックスの選択/解除を反転
[全選択/解除]チェックでチェックボックスの選択/解除を反転

 [全選択/解除]チェックを反転させた時に、$(this).prop('checked')でその値(オン/オフ)を取得し、それに連動して、個々のチェックボックスのオン/オフを設定しているわけです。定型的なコードですので、覚えておくと便利でしょう。

処理対象:フォーム要素 カテゴリ:属性
API:.val() カテゴリ:Attributes(属性)|Forms(フォーム)|Manipulation(操作) > General Attributes(一般属性)
API:.prop() カテゴリ:Attributes(属性)|Manipulation(要素の操作) > General Attributes(一般属性)

※以下では、本稿の前後を合わせて5回分(第48回~第52回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

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

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

49. ラジオボタン/チェックボックス/選択ボックスの選択テキストを取得するには?(val)

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

50. 【現在、表示中】≫ フォーム要素に対して値を設定するには?(val)

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

51. jQuery1.x/2.xで作成したアプリをjQuery 3に対応させるには?

2016年6月、jQuery 3.0が正式リリースされた。今後は、従来バージョンのjQueryを使った既存のサイト/ページを、最新のバージョン3に徐々に移行していこう。移行ライブラリ「jQuery Migration」を使った方法を解説する。

52. ページに新たな要素を挿入するには? ― insertBefore/insertAfter/prependTo/appendTo/before/after/prepend/appendメソッド

HTML文字列で要素を作成してから、指定した場所にそれを挿入する方法を解説。また結果は同じになるが少し手順を変えて、指定した場所にHTML文字列で要素を生成する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!