ITコラム

jQuery

2018.09.13

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

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

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 属性の値を取得してボタンの右側に表示します。
各ボタンをクリックしてみて下さい。

男性　　

女性　　

ラジオボタンのソースコード

<input type="radio" name="wk_rd" id="rd1" value="Ｍ">男性

  <input type="radio" name="wk_rd" id="rd2" value="F">女性

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

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

▲目次へ戻る