jQueryのvalをわかりやすく解説！valを正しく使いこなそう

システム
エンジニア

valメソッドとはどういった特徴のあるメソッドでしょうか？

プロジェクト
マネージャー

はい、valメソッドはHTMLタグ内のvalue属性を取得したり変更できるメソッドです。

jQueryのvalとは？

jQueryはJavaScriptで使える強力なライブラリです。jQueryは複雑な処理を簡単に実行することができます。その機能の中でval()はメソッドと呼ばれる機能で、HTMLのvalue属性の値を取得することができます。

この記事のサンプルを実行する場合は、htmlファイルのheadタグ内で以下のようにjQueryのライブラリを設定してください。なおjQueryは定期的にバージョンアップされるので以下が最新とは限りません。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

HTMLのvalue属性について

jQueryのval()について解説する前に、それで取得できるHTMLのvalue属性に付いて説明しましょう。value属性とは以下のタグで使用できる属性です。

<button>
<data>
<input>
<li>
<meter>
<option>
<progress>

役割はWebフォームに初期値を持たせたり、チェックボックスやラジオボタンでどれを選択したかを判別するために使われます。Webページではなくてはならない属性と言えます。

valでvalue属性の値を取得できる

それでは早速jQueryのval()を使ってみましょう。htmlファイルのbodyタグ内に以下のようなテキストタイプのinputタグのフォームがあるとします。

<input type=”text” value=”valueの初期値です。”>

val()でこのvalueの内容を取得することができます。なおjQueryはJavaScriptなのでscrpitタグ内に書きます。もし記述が長くなる場合は、以下のようにjsファイルに分けて記述しましょう。

<script type=”text/javascript” src=”script.js”></script>

value属性の内容を取得してコンソールに表示

上のinputタグのvalueの内容は以下で取得できます。

$(document).ready(function(){
var v = $(‘input’).val();
console.log(v);
});

実行するとコンソールに、

valueの初期値です。

と表示されます。なおコンソールの使い方ですが、Google Chromeの場合は対象のhtmlページが表示されている時にF12を押してDevToolsを起動し、Consoleのタブを選択すると使えます。文字化けする場合は、htmlファイルの文字コードをUTF-8にしてください。

val()はvalueを取得するメソッド

jQueryでは$(‘～’).abc()の様に記述します。’～’の部分はセレクタ、abc()の部分はメソッドと言います。今回解説するval()はメソッドということです。セレクタに’input’とタグ名を指定することで、val()によりそのvalueを取得できるのです。jQueryはこのようなセレクタとメソッドのセットで記述します。

最初のdocumentセレクタはhtmlページ全体を指します。readyメソッドは読み込みが終わったらfunctionの処理を行うという意味です。その内部ではinputタグのvalue要素をvという変数に入れて、console.logでコンソールに出力しています。

なおコンソールではなくポップアップ表示が良い人は、alert(v);としてください。小さなウィンドウが出て内容が表示されます。

チェックボックスのサンプル

inputタグのテキスト以外のタイプについても解説します。まずはチェックボックスです。htmlが以下のようになっているとします。

No.1
No.2
No.3
button

<input type=”checkbox” value=”1″>No.1
<input type=”checkbox” value=”2″>No.2
<input type=”checkbox” value=”3″>No.3
<button>button</button>

以下のjQueryのコードで、チェックボックスをチェックした後にボタンを押すと、チェックした所のvalueを取得できます。複数選択すれば複数表示されます。

$(document).ready(function(){
$(‘button’).click(function() {
$(‘input:checked’).each(function() {
var v = $(this).val();
console.log(v);
})
})
});

チェックボックスのサンプルの解説

上のサンプルは、’button’セレクタのclick()メソッドにより、ボタンが押された時にfunctionで新たな関数を呼び出しています。

その中の’input:checked’セレクタのeach()メソッドでは、チェックされた箇所が全て選択されます。それに対してさらに関数を呼び出し、その中で選択された箇所それぞれをthisセレクタで指定し、val()メソッドで中身を取得しています。

2段構造のようになっていますが、実際には上の文章の説明ほどは複雑さを感じないでしょう。サンプルを実行すれば感覚で分かるようになります。

ラジオボタンのサンプル

次はラジオボタンのサンプルです。htmlが以下のようになっているとします。

No.1
No.2
No.3
button

<input type=”radio” name=”test” value=”1″>No.1
<input type=”radio” name=”test” value=”2″>No.2
<input type=”radio” name=”test” value=”3″>No.3
<button>button</button>

以下のjQueryでボタンが押下された時にチェックされている箇所のvalueを取得できます。ラジオボタンは1つしかチェックできないのでeach()がなくなっています。

$(document).ready(function(){
$(‘button’).click(function() {
var v = $(‘input:checked’).val();
console.log(v);
})
})

ドロップダウンメニューのサンプル

次はドロップダウンメニューのサンプルです。htmlが以下のようになっているとします。

No.1 No.2 No.3
button

<select>
<option value=”1″>No.1</option>
<option value=”2″>No.2</option>
<option value=”3″>No.3</option>
</select>
<button>button</button>

以下のjQueryでvalueを取得できます。今までと違いセレクタに’select’とタグ名を指定すれば良いだけになります。

$(document).ready(function(){
$(‘button’).click(function() {
var v = $(‘select’).val();
console.log(v);
})
});

複数選択のドロップダウンメニューのサンプル

以下のようなselectにmultipleがついた複数選択できるドロップダウンメニューの場合はjQueryはどうなるのでしょうか。

No.1 No.2 No.3
button

<select multiple>
<option value=”1″>No.1</option>
<option value=”2″>No.2</option>
<option value=”3″>No.3</option>
</select>
<button>button</button>

jQueryは上のmultiple無しと同じままでかまいません。実行すると以下のように配列で複数表示してくれます。自動的に複数選択に対応してくれるということです。

[“2”, “3”]

システム
エンジニア

他のメソッドを利用することで複数の値を取得したり、繰り返し処理もできるのですね。

プロジェクト
マネージャー

大変便利なメソッドです。ぜひマスターして活用してください。

jQueryのval()はvalueを簡単に取得できる

jQueryのval()について解説しましたが、ご理解頂けましたでしょうか。

inputやselectなどのvalue属性の値を簡単に取得できることがお分かり頂けたかと思います。是非活用しましょう。