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

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

目次

1. val メソッド
2. val メソッドで value 値を取得
3. val メソッドで value 値を設定

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 メソッドを使用すると 簡単に入力値を活用することができます。

▲目次へ戻る