こんにちは、ライターのマサトです。今回は、jQueryでHTMLのvalue属性を取得・変更・設定することができる「val()」メソッドについて学習をしていきましょう！
この記事では、
- 「val()」とは？
- val()の使い方
- select要素の取得
- フォーム部品のvalue値
というように基本的な内容から応用的な使い方に関しても解説していきます。この記事で、「val()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「独学と並行しながら、副業で稼げるようになれるかな…」
そんな不安を抱えている人は、ぜひ「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポート。フリーランスエンジニアの支援を受けながら、実際の副業案件にも挑戦できます。
これまで4万5,000名以上の受講生を指導してきた侍エンジニアなら、未経験からでも挫折なく副業での収入獲得に直結するスキルが身につけられますよ。
「val()」とは？
それでは、まず「val()」メソッドについて基本的な知識から学習をしていきましょう。「val()」は、HTMLタグ内に記述されているvalue属性を取得したり変更することができるメソッドになります。
一般的にvalue属性は以下のようなフォーム要素でよく使われています。
<form>
<input type="text" value="ここに入力してください">
<input type="checkbox" value="sample">：サンプル
<input type="checkbox" value="test" checked>：テスト
<input type="checkbox" value="text">：テキスト
</form>
上記の入力ボックスやチェックボックスのように、value属性が記述されていれば「val()」メソッドで取得・変更することが可能です。つまり、ユーザーがフォームに入力した内容や選択した項目をjQuery側から把握できるようになるわけです。
本記事では、「val()」メソッドについて基本から応用技まで詳しく解説していきますので、ぜひ参考にしてみてください！
val()の使い方
ここからは、実際に「val()」メソッドを使ったプログラミング手法について学んでいきましょう！一般的な使い方として、value属性の取得・変更・設定についてそれぞれ詳しく見ていきます。
val()を使ってvalue値を取得する方法
まずは、「val()」メソッドを使ってvalue値を取得してみましょう！
一般的な記述としては、【対象要素.val()】のように取得したいHTML要素にval()を実行するだけでOKです。例えば、次のボタン要素を見てください。
<button id="btn-a" value="a">ボタンA</button>
このボタン要素には、value値として「a」が設定されていますね。
この値をval()メソッドで取得するには次のように記述します。
var btn = $('#btn-a').val();
console.log( btn );
実行結果
a
この例では、ボタン要素を対象にして「val()」メソッドを実行していますね。取得した値は実行結果からも分かるように「a」が出力されています。このように、val()メソッドを利用すれば簡単にHTML要素のvalue値を取得できるわけです！
val()を使ってvalue値を設定する方法
次は、そもそもvalue値が設定されていないHTML要素に<value値を設定する方法について見ていきましょう！ 方法は簡単で、【 対象要素.val( value値 ) 】のようにval()の引数へ設定したいvalue値を指定するだけです。例えば、value値が設定されていないボタン要素があるとします。
<button id="btn-a">ボタンA</button>
このボタン要素にvalue値を設定するには、次のように記述します！
$('#btn-a').val('a');
実行後のボタン要素
<button id="btn-a" value="a">ボタンA</button>
ボタン要素に対して「val(‘a’)」と記述することで、value値を「a」と設定することができます。実行後のボタン要素を見てみると、value属性値が新たに追加されているのが分かりますね。
val()を使ってvalue値を変更する方法
今度は、途中でvalueの値を変更したい場合にどうするかを見ていきましょう！
実は、val()メソッドは値を設定するとvalue値を上書きするという特性があります。この特性を利用すれば、これまで通りの使い方で任意のHTML要素のvalue値を変更することができるわけです。
例えば、次のボタン要素があるとします。
<button id="btn-a" value="a">ボタンA</button>
このボタン要素にはvalue値「a」が設定されていますね。
そこで、val()メソッドを使ってvalue値を変更するには次のように記述します。
$('#btn-a').val('value-a');
実行後のボタン要素
<button id="btn-a" value="value-a">ボタンA</button>
value値を設定する時と同じやり方ですね。これにより、ボタン要素のvalue値が上書きされているのが実行後のボタン要素を見ても明らかです。
select要素の取得
ここからは、フォームでよく利用するselect要素のvalue値を取得する方法を見ていきましょう。select要素は1つだけ選択できるものと複数の選択肢を選べるものがあるので、それぞれ詳しく見ていきます。
select要素のvalue値を取得する方法
まずは、通常のselect要素を使って選択肢から1つを選んで、そのvalue値を取得する方法を学んでいきましょう！
val()メソッドの使い方としてはこれまでとほとんど同じですが、取得方法が少し異なっているので注意が必要です。例えば、次のようなselect要素があるとします。
<select>
<option value="1">項目１</option>
<option value="2">項目２</option>
<option value="3">項目３</option>
</select>
<button>ボタン</button>
この例では、3種類の選択肢が用意されたselect要素が配置されています。一般的にはユーザー側が選択肢を選ぶため、フォームが表示された段階ではどの選択肢を選んでいるかは分かりませんよね？
そこで、ユーザーが選択肢を選んだあとにボタンをクリックすることで、どの選択肢を選んだかを把握してvalue値を取得するようにします。
jQuery側の処理としては以下のようになります！
$('button').click(function() {
var value = $('select').val();
console.log(value);
})
ボタン要素に対してクリックイベント処理を記述しており、その中でval()メソッドを実行しているのが分かりますね。このように記述することで、選択された要素のvalue値を取得することができるというわけです！
複数のselect要素のvalue値を配列で取得する方法
select要素は属性プロパティとして「multiple」を記述すると、複数の選択肢を選べるようになります。先ほどのselect要素を複数選択に対応させると、以下のようになります。
<select multiple>
<option value="1">項目１</option>
<option value="2">項目２</option>
<option value="3">項目３</option>
</select>
<button>ボタン</button>
select要素に「multiple」を記述しているのが分かりますね。これにより、ユーザー側は1つだけでなく複数の選択肢を選べる状態になります。この状態でval()メソッドを使うと、value値も複数取得することができるのです！
例えば、「項目１」「項目３」を同時に選択した場合は次のようになります。
$('button').click(function() {
var value = $('select').val();
console.log(value);
})
実行結果
["1", "3"]
注目すべきは実行結果です！
複数のvalue値を取得した場合には、配列データとして取得できるようになっています。また、val()メソッドの記述方法はまったく一緒なので、あくまでもselect要素に「multiple」が記述されているかどうかの違いになります。
jQueryでselect要素を操作する方法についてさらに知識を深めたい方は、次の記事で詳しくまとめているので参考にしてみてください！
フォーム部品のvalue値
ここからは、フォーム部品としてよく使われる要素に対して「value値」を取得する方法を見ていきましょう！主に、checkbox要素・radio要素・textbox要素について、それぞれ詳しく学んでいきます。
checkbox要素のvalue値を取得する方法
まずは、checkbox要素に対してval()を使ったvalue値の取得方法を見ていきましょう！
checkbox要素の場合、ユーザーがチェックを入れた要素に対してvalue値を取得するのが一般的です。例えば、次のようなcheckbox要素があるとします。
<input type="checkbox" value="1">サンプル１ <input type="checkbox" value="2">サンプル２ <input type="checkbox" value="3">サンプル３ <button>ボタン</button>
この例では、3種類のcheckbox要素とボタンが配置されています。すべてのcheckbox要素を確認して、チェックが入っている要素のvalue値だけを取得するには「each()」を使います。
$('input:checked').each(function() {
var r = $(this).val();
console.log(r);
})
「input:checked」に対してeach()による繰り返し処理を行うことで、チェックが入っている要素だけを抽出することができます。そして、val()を使ってvalue値を取得すれば、チェック済みの値をすべて取得できるわけです。
ただし、select要素と同じでユーザーが選択してから処理を行う必要があるため、クリックイベント処理の中に記述しましょう！
$('button').click(function() {
$('input:checked').each(function() {
var r = $(this).val();
console.log(r);
})
})
ちなみに、checkbox要素に対してさらに知識を深めたい場合は、次の記事で詳しくまとめているので参考にしてみてください！
radio要素のvalue値を取得する方法
次に、radio要素に対してvalue値を取得してみましょう！radio要素は「select / checkbox」と違い、ユーザーが選択できるのは1つだけでなのでシンプルで簡単です。
例えば、次のようなradio要素があるとします。
<input type="radio" name="sample" value="1">サンプル１ <input type="radio" name="sample" value="2">サンプル２ <input type="radio" name="sample" value="3">サンプル３ <button>ボタン</button>
3つのradio要素とボタンが配置されています。ユーザーは3つのradio要素から1つだけ選択することができるので、その選択されたvalue値を取得するようにしましょう。
radio要素もこれまで通りクリックイベント処理内にval()メソッドを記述していきます。
$('button').click(function() {
var result = $('input:checked').val();
console.log(result);
})
セレクタ指定で「input:checked」と記述することで、チェックされているradio要素を指定できます。あとは、そのままval()メソッドを実行するだけでvalue値が取得できるというわけです。
textbox要素のvalue値を取得する方法
今度は、textbox要素に対してvalue値を取得してみましょう！
textbox要素は、ユーザーが何らかの文字列を入力することができるボックスになります。value値を設定することで、あらかじめボックス内に任意の文字列を入力した状態にできるのです。例えば、次のようなtextbox要素があるとします。
<input type="text" value="サンプルテキスト">
そして、val()メソッドを使ってvalue値を取得するには次のようにします。
var value = $('input').val();
console.log(value);
実行結果
サンプルテキスト
この例では、input要素に対してval()メソッドを実行することでvalue値を取得しています。実行結果を見るとinput要素のvalue値に設定されていた文字列が取得できているのが分かりますね。
まとめ
今回は、jQueryからHTMLのvalue値を取得・設定・変更できる「val()」メソッドについて学習をしました！最後に、もう一度ポイントをおさらいしておきましょう！
- val()メソッドを使うとvalue値を取得・設定・変更できる
- select / checkbox要素は複数のvalue値を取得することができる
- checkbox要素のvalue値を取得する場合はeach()による繰り返し処理が便利
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
