jQuery逆引きリファレンス
フォーム要素に対して値を設定するには？（val）
valメソッドを使ってフォーム要素の値を設定する方法を説明。また、利用上の注意点や、値をクリアする方法、応用例として全てのチェックボックスを選択／解除する方法も示す。
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>
</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>
|
テキストボックスなどの設定は一目瞭然ですが、ラジオボタン／チェックボックス／リストボックス（複数選択）などの要素については要注意です。というのも、これらの要素では、選択すべき値は配列として渡す必要があります。スカラー値として渡した場合には、正しく設定されませんので注意してください。
また、ラジオボタン／チェックボックスの値をクリアする場合には、propメソッドを利用します。
|
$('[name="blood"]').prop('checked', false);
|
チェックボックスの値を全選択／全解除する
応用パターンとして、チェックボックスのリストを全て選択／解除するためのボタンを作成してみましょう。
|
<!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>
|
［全選択／解除］チェックを反転させた時に、$(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文字列で要素を生成する方法を説明する。
