【jQuery】value属性を取得/変更する方法

今回の記事は、

  • jQueryをvalue属性を取得したい
  • jQueryをvalue属性を設定/変更したい

という方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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属性を扱う方法について解説してきましたがいかがでしたか?

実際の開発でも頻繁に使用することとなる機能ですので、ぜひこの機会にマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。