今回の記事は、
- jQueryをvalue属性を取得したい
- jQueryをvalue属性を設定/変更したい
という方に向けた記事になっています。
val()メソッドでvalue属性を取得してみましょう
まずは、val()メソッドを使ってvalue属性を取得する方法を見ていきましょう。
val()メソッドの使い方はとてもシンプルで、jQueryオブジェクトに対して直接呼び出すだけで大丈夫です。
基本的な使い方
$(セレクタ).val()それでは早速、実際のコードを見ながらその使い方を確認していきましょう。
実装コード
<input id="test-input1" value="テストテキストです">
<button onClick="checkValue()">value属性を取得</button>
<script>
function checkValue() {
const value = $("#test-input1").val()
console.log(value)
}
</script>出力結果
テストテキストです動作確認用
上記のボタンを押していただくと、ディベロッパーツールのconsole画面に「テストテキストです」という文字列が表示されているかと思います。
上記の通り、非常に使いやすいメソッドになっていますので、実際の開発でも頻繁に目にすることになるかと思います。
また、jQueryを使ってvalue属性を取得する方法としては、attr()メソッドを使用する方法も存在しています。
attr()メソッドの使い方については以下の記事にて詳しく説明していますので、こちらもぜひご覧くださいね。
今回の記事は、 jQueryを使ってクラス名を取得したい素のJavascriptを使った方法も知っておきたい という方に向けた記事になっています。 この記事の前半では、「jQueryを使ってクラス名を取得する方法」につい[…]
val()メソッドでvalue属性を設定してみましょう
続いては、val()でvalue属性を設定する方法を見ていきましょう。
設定方法はとても簡単で、設定したい値をval()メソッドの引数に指定してあげるだけで大丈夫です。
基本的な使い方
$(セレクタ).val("設定値")それでは早速、実際のコードを見ながらその使い方を確認していきましょう。
実装コード
<input id="test-input2" value="テストテキストです">
<button onClick="changeValue()">value属性を設定</button>
<script>
function changeValue() {
const input = $("#test-input2")
input.val("変更されたテキストです")
}
</script>動作確認用
上記のボタンを押していただくと、inputタグの中身（value属性）が変更されているのがご確認いただけたかと思います。
使い方としては非常にシンプルなのですが、設定したいテキストを引数にとる、ということに注意しなければなりません。
Javascriptに限らず、その他の言語を使ってこられた方にとっては、思わず$("セレクタ").val() = "設定値"としてしまいがちですが、そこはグッと我慢して、設定値は引数に指定するようにしましょう。
また、val()メソッドはvalue属性を上書きしてくれますので、既存のvalue属性を変更する場合も同様の使い方で問題ありません。
【応用編】関数を使ってvalue属性を設定してみましょう
ここまでは、val()メソッドの引数に値を指定する形でvalue属性を設定してきましたが、それを少し応用し、関数を使用してvalue属性を設定することも可能です。
具体的には、val()メソッドの引数に関数を代入してあげると実現できます。言葉だけではイメージが湧きづらいかと思いますので、実装コードを見ながら確認していきましょう。
実装コード
<div id="test-target">
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
</div>
<button onClick="changeValues()">value属性を設定</button>
<script>
function changeValues() {
$("#test-target > input").val(function(index, value) {
return value * 2;
});
}
</script>動作確認用
上記の通り、val()メソッドの中に関数を代入することで、その関数の返り値がvalue属性に設定されます。今回の例では、元々のvalue属性を2倍した値を再設定するという処理を実装していますので、ボタンをクリックしてぜひ確かめてみてくださいね。
関数を使用すると、実装の幅が一気に広がりますので、機会があればぜひ使ってみてくださいね。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌？
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう？【現役エンジニアが徹底解説します】
MidWorks（ミッドワークス）の評判ってどう？【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまで、jQueryのval()メソッドを使ってvalue属性を扱う方法について解説してきましたがいかがでしたか？
実際の開発でも頻繁に使用することとなる機能ですので、ぜひこの機会にマスターしておいてくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
