デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.val( )value属性の取得/設定

構文

value属性の取得返値:文字列/数値/配列
jQo.val( )ver1.0〜
value属性の設定返値:jQueryオブジェクト
jQo.val()ver1.0〜
jQo.val( function )ver1.4〜
※値に配列を設定して、複数の値を設定することも可能です。

機能

引数を設定しない場合は、jQueryオブジェクトで指定した要素のvalue属性の値を取得します。引数に値を設定した場合はvalue属性の値を設定します。値の代わりにfunctionを指定することも可能で、条件によって設定するvalue属性の値を変更するなど高度な処理にも対応できます。

解説

value属性の値を取得

サンプル(val/01.html)を開いてbody内にselect要素があることを確認して下さい。

<select>
	<option>red</option>
	<option>green</option>
	<option>blue</option>
</select>

jQueryは以下の様に記述されbuttonをクリックすると、select要素のvalue属性の値(どのメニューが選択されているか)を変数myVolに代入し、alertで表示します。

$("button").click(function(){
	var myValue = $("select").val();
	alert(myValue);
})

また複数選択が可能なselect要素でも利用できます。サンプル(val/01b.html)を開いてbody内にselect要素にmultiple属性が設定されていることを確認してください。

<select multiple>
	<option>red</option>
	<option>green</option>
	<option>blue</option>
</select>

jQueryはサンプルval/01.htmlから変更ありません。
複数選択の場合は得られる値は配列で返されます。そのため複数のメニューを選択してからbuttonをクリックすると選択されている値がカンマに区切られてアラートに表示されます。

テキストボックスでの利用

select要素以外のサンプルも紹介します。サンプル(val/02.html)を開いてhtml内にinput要素のテキストボックスがあることを確認して下さい。

<input name="comment" type="text" value="コメントを記入してね"/>
<button>CHECK</button>

jQueryは以下の様になっておりbuttonをクリックするとテキストボックス(name属性がcommentの要素)に記入された文字をアラートで表示します。

$("button").click(function(){
	var myValue = $("input[name='comment']").val();
	alert(myValue);
})

サンプルval/02.htmlではinput要素が1つしかないのでセレクタはinputだけでも機能しますが、通常はinput要素が複数あるのでサンプルのようにセレクタ[属性名='値']を利用してname属性等で対象を絞るようにしました。

ラジオボタンでの利用

ラジオボタンの時にはさらにセレクタに工夫が必要になります。サンプル(val/03.html)を開いてbody内にラジオボタンがあることを確認して下さい。

<input type="radio"  name="radio1" value="red" checked/> red
<input type="radio"  name="radio1" value="green"/> green
<input type="radio"  name="radio1" value="blue"/> blue

jQueryは以下の様に記述され、buttonをクリックすると現在選択されているラジオボタンのvalue属性の値をアラートで表示するようにしています。セレクタ:checkedを利用しているのがポイントです。

$("button").click(function(){
	var myValue = $("input[name='radio1']:checked").val();
	alert(myValue);
})

ラジオボタンは複数のinput要素から構成されるため、上記のようにセレクタの指定がポイントとなります。サンプルval/03.htmlではセレクタ[属性名='値']を利用してラジオボタンのグループ「radio1」を選択し、さらにセレクタ:checkedを利用してチェックが入っているラジオボタンのvalueの値を得ています。

属性の値を設定

引数に値を設定することでvalue属性の値を設定することができます。サンプル(val/04.html)を開いてbodyの構成はサンプルval/01.htmlと同じ事を確認してください。jQueryには以下の様に記述され、buttonをクリックすると"green"が選択されます。

$("button").click(function(){
	$("select").val("green");
})

複数選択のselect要素でもvalue属性の値を設定することができます。サンプル(val/04b.html)を開いてbodyの構成はサンプルval/01b.htmlと同じ事を確認してください。jQueryは以下の様に記述されbuttonをクリックすると"green"と"blue"が選択されます。複数のメニューを選択する場合は配列を利用するのがポイントです。

$("button").click(function(){
	$("select").val(["green","blue"]);
})

テキストボックスでの利用

select要素以外のサンプルも紹介します。サンプル(val/05.html)を開いてbody内の構成はサンプルval/02.htmlと同じ事を確認してください。jQueryは以下の様に記述されbuttonをクリックするとテキストボックスにhello!と設定されます。

$("button").click(function(){
	$("input[name='comment']").val("Hello!");
})

ラジオボタンでの利用

ラジオボタンの選択を変更する場合は、input要素のcheckedプロパティを切り替えるためpropメソッドを利用するのが正しいのかもしれません。しかしvalメソッドを利用しても変更できるので紹介します。サンプル(val/06.html)を開いてbody内の構成はサンプルval/03.htmlと同じ事を確認してください。jQueryは以下の様に記述されています。セレクタでradio1のname属性を指定しラジオボタンのグループを選択肢、valメソッドの引数に配列を利用して選択したいvalue属性を指定することでラジオボタンの選択を切り替えることができます。

$("button").click(function(){
	$("input[name='radio1']").val(["blue"]);
})

valメソッドの引数に配列を設定できるということは複数のチェックを同時に入れることができることを示唆しています。ラジオボタンでは1つしかチェックが入れられないため確認できませんが、チェックボックスを利用したサンプル(val/06b.html)も用意したので確認して下さい。valメソッドの引数の配列に"red"と"blue"が入れてあるので、buttonをクリックするとredとblueにチェックが入ります。

参考としてpropメソッドを利用したサンプルも紹介します。→サンプル(val/06c.html
propメソッドの記事と合わせて確認して下さい。

$("button").click(function(){
	$("input[name='radio1'][value='blue']").prop("checked",true);
})

引数にFunctionを設定

valメソッドは引数にfunctionを設定することができます。functionを設定することで条件によって設定する値を変更するなど、高度なニーズに対応することができます。

サンプル(val/07.html)を開いてhtml内にテキストボックスが5つあることを確認してください。jQueryは以下の様に記述され、buttonをクリックするvalメソッドによってとinput要素のvalue属性の値をfunction「valFunc」で設定するようにしています。

$("button").click(function(){
	$("input").val(valFunc);
})

valメソッドの引数に設定するFunctionは以下の様な構文になっています。まず2つの引数(インデックス番号/value属性の現在の値)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に設定したい値をreturnで返すようにします。

valメソッドに設定するFunctionの構文
function 任意の名前(インデックス番号, value属性の現在の値){
 任意の処理(2つの引数を利用可能)
 return 設定したい値;
}

サンプルで設定しているfunction「valFunc」は以下の様になっており、引数で受け取った変数index(インデックス番号)を利用して「〜番目のコメント」という文章を作成しreturnで返すようにしています。
このサンプルでは引数のcurrentVal(value属性の現在の値)は利用していません。

function valFunc(index, currentVal) {
	var newVal = index+"番目のコメント";
	return newVal;
}

結果として、buttonをクリックすると各コメントボックスに「〜番目のコメント」という文章が表示されます。

関連項目

value属性以外の属性値にはattrメソッドを利用するようにしましょう。また属性の値を持たないcheckedやselected,disabledなどはpropメソッドの利用が推奨されます。valメソッドと合わせて覚えましょう。