jQuery【val】value値の取得と設定

jQuery の val メソッドを使用すると、HTML 要素の value 値を取得したり value 値を新たに設定したりすることができます。
今回は、jQuery の val メソッドの使用方法について解説いたします。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. val メソッド

　
val メソッドは、要素の value 属性の値を取得したり 設定したりすることができるメソッドです。

val メソッドは、引数によって 3 通りの記述方法があります。

$(セレクタ).val( );

$(セレクタ).val( value );

$(セレクタ).val( function( index, value ) );

引数無しの「 .val( ) 」は、value 値を取得する際に使用し、value 値を設定する場合は 引数に設定値を記述します。

val メソッドの引数の内容は、それぞれ以下の通りです。

.val( value )

value
設定する値を指定 配列で値を渡すと selected や checked が選択状態となる

　

.val( function( index, value ) )

function ( index, value )
設定する値を 関数の戻り値として指定 　index ： 要素の番号 　value ： 元の値（ 変更前の値 ）

▲目次へ戻る

　

2. val メソッドで value 値を取得

　
val メソッドを使用して、ラジオボタンの value 属性の値を取得してボタンの右側に表示します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#btn1").on("click", function() {
    // 表示しない方を初期化
    $("#out2").text("");

    // value 値を取得して表示
    $("#out1").text($("#rd1").val());
  });
  $("#btn2").on("click", function() {
    // 表示しない方を初期化
    $("#out1").text("");

    // value 値を取得して表示
    $("#out2").text($("#rd2").val());
  });
});
</script>

<div style="background-color:#CCC; padding:20px;">
  <div style="display:inline-flex; align-items:center;">
    <input type="radio" name="wk_rd" id="rd1" value="M">男性
  　<input type="button" id="btn1" value="value 値表示">
  　<div id="out1"></div>
  </div><br>
  <div style="display:inline-flex; align-items:center;">
    <input type="radio" name="wk_rd" id="rd2" value="F">女性
  　<input type="button" id="btn2" value="value 値表示">
  　<div id="out2"></div>
  </div>

  <div style="border: thin solid; padding: 10px;">
    ラジオボタンのソースコード
    <input type="radio" name="wk_rd" id="rd1" value="M">男性
    <input type="radio" name="wk_rd" id="rd2" value="F">女性
  </div>
</div>

val メソッドで value 値を取得しているのは「 $(“#rd1”).val() 」と「 $(“#rd2”).val() 」の部分です。
id 名で要素を特定して val メソッドを記述するだけで value 値を取得できるので、大変便利です。

▲目次へ戻る

　

3. val メソッドで value 値を設定

　
val メソッドを使用して、ボタンの value 値（ 表示されるテキスト ）を設定します。
入力欄に 設定するテキストを入力して ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#btn3").on("click", function() {
    // value 値を設定
    $("#btn3").val($("#in1").val());
  });
});
</script>

<div style="background-color : #CCC; padding:20px;">
  <input type="text" id="in1" value="">
  <input type="button" id="btn3" value="初期値">
</div>

val メソッドで value 値を設定しているのは「 $(“#btn3”).val( 設定する値 ) 」の部分です。

入力値を value 値に設定しているので、val メソッドの引数にも「 $(“#in1”).val() 」として val メソッドを使用しています。

このように、val メソッドを使用すると 簡単に入力値を活用することができます。

▲目次へ戻る

4. まとめ

jQueryのval メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る