.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryのvalをわかりやすく解説!valを正しく使いこなそう

jQueryのvalをわかりやすく解説!valを正しく使いこなそう

  • Javascript
  • jQuery
  • プログラミング言語
公開日時:   更新日時:
jQueryのvalをわかりやすく解説!valを正しく使いこなそう
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    valメソッドとはどういった特徴のあるメソッドでしょうか?

    プロジェクト
    マネージャー
    はい、valメソッドはHTMLタグ内のvalue属性を取得したり変更できるメソッドです。

    jQueryのvalとは?


    jQueryはJavaScriptで使える強力なライブラリです。jQueryは複雑な処理を簡単に実行することができます。その機能の中でval()はメソッドと呼ばれる機能で、HTMLのvalue属性の値を取得することができます。

    この記事のサンプルを実行する場合は、htmlファイルのheadタグ内で以下のようにjQueryのライブラリを設定してください。なおjQueryは定期的にバージョンアップされるので以下が最新とは限りません。

    <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

    HTMLのvalue属性について

    jQueryのval()について解説する前に、それで取得できるHTMLのvalue属性に付いて説明しましょう。value属性とは以下のタグで使用できる属性です。

    <button>
    <data>
    <input>
    <li>
    <meter>
    <option>
    <progress>

    役割はWebフォームに初期値を持たせたり、チェックボックスやラジオボタンでどれを選択したかを判別するために使われます。Webページではなくてはならない属性と言えます。

    valでvalue属性の値を取得できる

    それでは早速jQueryのval()を使ってみましょう。htmlファイルのbodyタグ内に以下のようなテキストタイプのinputタグのフォームがあるとします。

    <input type=”text” value=”valueの初期値です。”>

    val()でこのvalueの内容を取得することができます。なおjQueryはJavaScriptなのでscrpitタグ内に書きます。もし記述が長くなる場合は、以下のようにjsファイルに分けて記述しましょう。

    <script type=”text/javascript” src=”script.js”></script>

    value属性の内容を取得してコンソールに表示

    上のinputタグのvalueの内容は以下で取得できます。

    $(document).ready(function(){
    var v = $(‘input’).val();
    console.log(v);
    });

    実行するとコンソールに、

    valueの初期値です。

    と表示されます。なおコンソールの使い方ですが、Google Chromeの場合は対象のhtmlページが表示されている時にF12を押してDevToolsを起動し、Consoleのタブを選択すると使えます。文字化けする場合は、htmlファイルの文字コードをUTF-8にしてください。

    val()はvalueを取得するメソッド

    jQueryでは$(‘~’).abc()の様に記述します。’~’の部分はセレクタ、abc()の部分はメソッドと言います。今回解説するval()はメソッドということです。セレクタに’input’とタグ名を指定することで、val()によりそのvalueを取得できるのです。jQueryはこのようなセレクタとメソッドのセットで記述します。

    最初のdocumentセレクタはhtmlページ全体を指します。readyメソッドは読み込みが終わったらfunctionの処理を行うという意味です。その内部ではinputタグのvalue要素をvという変数に入れて、console.logでコンソールに出力しています。

    なおコンソールではなくポップアップ表示が良い人は、alert(v);としてください。小さなウィンドウが出て内容が表示されます。

    チェックボックスのサンプル

    inputタグのテキスト以外のタイプについても解説します。まずはチェックボックスです。htmlが以下のようになっているとします。

    No.1
    No.2
    No.3

    <input type=”checkbox” value=”1″>No.1
    <input type=”checkbox” value=”2″>No.2
    <input type=”checkbox” value=”3″>No.3
    <button>button</button>

    以下のjQueryのコードで、チェックボックスをチェックした後にボタンを押すと、チェックした所のvalueを取得できます。複数選択すれば複数表示されます。

    $(document).ready(function(){
    $(‘button’).click(function() {
    $(‘input:checked’).each(function() {
    var v = $(this).val();
    console.log(v);
    })
    })
    });

    チェックボックスのサンプルの解説

    上のサンプルは、’button’セレクタのclick()メソッドにより、ボタンが押された時にfunctionで新たな関数を呼び出しています。

    その中の’input:checked’セレクタのeach()メソッドでは、チェックされた箇所が全て選択されます。それに対してさらに関数を呼び出し、その中で選択された箇所それぞれをthisセレクタで指定し、val()メソッドで中身を取得しています。

    2段構造のようになっていますが、実際には上の文章の説明ほどは複雑さを感じないでしょう。サンプルを実行すれば感覚で分かるようになります。

    ラジオボタンのサンプル

    次はラジオボタンのサンプルです。htmlが以下のようになっているとします。

    No.1
    No.2
    No.3

    <input type=”radio” name=”test” value=”1″>No.1
    <input type=”radio” name=”test” value=”2″>No.2
    <input type=”radio” name=”test” value=”3″>No.3
    <button>button</button>

    以下のjQueryでボタンが押下された時にチェックされている箇所のvalueを取得できます。ラジオボタンは1つしかチェックできないのでeach()がなくなっています。

    $(document).ready(function(){
    $(‘button’).click(function() {
    var v = $(‘input:checked’).val();
    console.log(v);
    })
    })

    ドロップダウンメニューのサンプル

    次はドロップダウンメニューのサンプルです。htmlが以下のようになっているとします。


    <select>
    <option value=”1″>No.1</option>
    <option value=”2″>No.2</option>
    <option value=”3″>No.3</option>
    </select>
    <button>button</button>

    以下のjQueryでvalueを取得できます。今までと違いセレクタに’select’とタグ名を指定すれば良いだけになります。

    $(document).ready(function(){
    $(‘button’).click(function() {
    var v = $(‘select’).val();
    console.log(v);
    })
    });

    複数選択のドロップダウンメニューのサンプル

    以下のようなselectにmultipleがついた複数選択できるドロップダウンメニューの場合はjQueryはどうなるのでしょうか。


    <select multiple>
    <option value=”1″>No.1</option>
    <option value=”2″>No.2</option>
    <option value=”3″>No.3</option>
    </select>
    <button>button</button>

    jQueryは上のmultiple無しと同じままでかまいません。実行すると以下のように配列で複数表示してくれます。自動的に複数選択に対応してくれるということです。

    [“2”, “3”]
    システム
    エンジニア
    他のメソッドを利用することで複数の値を取得したり、繰り返し処理もできるのですね。

    プロジェクト
    マネージャー
    大変便利なメソッドです。ぜひマスターして活用してください。

    jQueryのval()はvalueを簡単に取得できる

    jQueryのval()について解説しましたが、ご理解頂けましたでしょうか。

    inputやselectなどのvalue属性の値を簡単に取得できることがお分かり頂けたかと思います。是非活用しましょう。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job