スライドショー

jQueryのchange()によるイベント処理操作まとめ!

こんにちは、ライターのマサトです!

今回は、フォーム要素の内容が変更された時にイベント処理を実行できる「change()」について学習を進めていきましょう!

この記事では、

  • 「change()」とは?
  • 基本的な使い方
  • selectボックスを使う
  • radioボタンを使う
  • 複数の要素を扱う
  • という基本的な内容から、

  • changeイベントを発生させるには?
  • changeイベントが発火しない場合
  • などの応用的な使い方に関しても解説していきます。

    この記事で、「change()」をしっかり学習して自分のスキルアップを目指しましょう!

    「change()」とは?

    それでは、まず最初に「change()」についての基本的な知識から学習を始めましょう!

    「change()」は、主にinput / select / textareaなどの要素の中身が変更された際にイベント処理を実行することができます。例えば、次のサンプル例を見てください!

    <input type="radio" name="test">
    <input type="radio" name="test">
    <input type="radio" name="test">

    この例では、単純なラジオボタンが3つ配置されています。

    change()を使うと、いずれかのラジオボタンがクリックされた瞬間に何らかのイベント処理を自動的に実行することが出来るわけです。

    他にも、セレクトボックスから任意の項目を選択した時や、入力ボックスに文字が入力されてフォーカスが外れた瞬間に実行することも可能です。

    本記事では、このchange()について基本から応用技まで詳しく解説していきますのでぜひ参考にしてみてください!

    基本的な使い方

    ここからは、change()を使って実際にプログラミングするための手法について見ていきましょう!

    一般的な記述としては、【 対象要素.change( イベント処理関数 ) 】のように引数へイベント実行用の関数を指定すればOKです。次のサンプル例を見てください!

    <body>
    <input type="text">
    
    <script>
        $('input').change(function() {
    
            console.log( $(this).val() );
    
        });
    </script>
    </body>

    この例では、テキストボックスが1つ配置されています。

    そこで、何か文字を入力したあとに「エンターキー」を押すか、画面をクリックしてフォーカスを外してみましょう。コンソールログに入力した文字列が出力されるはずです。

    つまり、テキストボックス内に何らかの文字列が入力されることで、要素の変化を検知してイベントを自動的に実行してくれるわけです。

    selectボックスを使う

    次に、「selectボックス」を使った事例を見てみましょう!selectボックスは、複数の選択肢の中からユーザーが1つ選ぶことができるフォーム部品です。

    そこで、選んだ項目をchange()を使ってコンソールログに出力してみましょう!次のサンプル例を見てください。

    <body>
    <select>
        <option>おはよう</option>
        <option>こんにちは</option>
        <option>こんばんは</option>
    </select>
    
    <script>
        $('select').change(function() {
            var text = $('option:selected').text();
        
            console.log( text );
        });
    </script>
    </body>

    この例では、3つの選択肢を用意したselectボックスを配置しています。

    そこで、change()を使い「$('option:selected').text()」と記述することで選んだ項目のテキストを抽出しています。

    このように記述すれば、ユーザーが1つ選ぶたびにコンソールログに文字列が出力されるようになるというわけです。

    radioボタンを使う

    今度は、「radioボタン」を使ってみましょう!いずれかのradioボタンを選んだ際に、value属性値をコンソールログに出力してみます。

    次のサンプル例を見てください!

    <body>
    <input type="radio" name="sample" value="one">
    <input type="radio" name="sample" value="two">
    <input type="radio" name="sample" value="three">
    
    <script>
        $('input').change(function() {
            var text = $(this).val();
        
            console.log( text );
        });
    </script>
    </body>

    この例では、3つのradioボタンを配置しておりそれぞれにvalue属性値を設定しています。change()を使って、「$(this).val()」と記述することにより選択したradioボタンのvalue属性値を検出しているのが分かりますね。

    これにより、radioボタンを選択するたびにコンソールログへvalueの値が出力されるというわけです。

    複数の要素を扱う

    これまで、1つの要素に対してchange()を使ってきましたが、複数の要素に対して利用することも可能なのでご紹介しておきます。

    この複数の要素というのは、例えば「input要素」「select要素」で同じchange()を使ったイベント処理を実行したいようなケースで有効です。

    次のサンプル例を見てください!

    <body>
    <input type="text">
    <select>
        <option>サンプル1</option>
        <option>サンプル2</option>
    </select>
    
    <script>
        $('input, select').change(function() {
            console.log('変更されました!');
        });
    </script>
    </body>

    この例では、単純なinput要素とselect要素が配置されています。

    注目すべきはchange()を使う際のセレクタ指定になります!

    「$('input, select')」と記述することで、input要素とselect要素の両方に対応したchange()のイベント処理を実現しているわけです。

    実行内容が同じであれば、個別にchange()を記述するよりも効率が良いので覚えておくようにしましょう!

    changeイベントを発生させるには?

    change()は引数を無しにすると、changeイベントを意図的に発生させることができます。例えば、ボタンをクリックしたらinput要素のchange()イベントを実行する…というようなことも実現できるのです。

    次のサンプル例を見てください!

    <body>
    <input type="text">
    <button>ボタン</button>
    
    <script>
        $('input').change(function() {
            console.log('変更されました!');
        });
    
        $('button').click(function() {
            $('input').change();
        })
    </script>
    </body>

    この例では、input要素とボタンが配置されています。input要素にはchange()を使ったイベント処理が実装されていますよね?

    そして、ボタン要素にはクリックイベント処理が実装されています。テキストボックスに何か入力したあとにフォーカスを外すと、コンソールログに文字列が出力されるのはこれまで通りです。

    ところが、ボタンをクリックしても同じようにchange()イベントが実行されて文字列が出力されるのです!これはつまり、ボタンのクリックイベント内で「change()」を実行しているからなのです。

    このように引数なしのchange()を記述すれば、任意のタイミングでchangeイベントが実行できるので忘れないようにしましょう!

    changeイベントが発火しない場合

    change()イベントは使い方によっては正常に動作せず、意図したとおりにならないケースもあります。

    例えば、テキストボックスに「val()」を使ってあとから文字列を入力する場合を見てみましょう!

    <body>
    <input type="text">
    <button>ボタン</button>
    
    <script>
    $('input').change(function() {
        console.log('変更されました!');
    });
    
    $('button').click(function() {
        $('input').val('こんにちは');
    })
    </script>
    </body>

    この例では、テキストボックスとボタン要素が配置されていますね。テキストボックスに文字列を入力してフォーカスを外すとコンソールログに「変更されました!」という文字列が出力されます。

    そして、ボタンをクリックするとval()を使って「こんにちは」という文字列をテキストボックスへ入力します。

    しかし、この時にフォーカスを外してもコンソールログに「変更されました!」という文字列は出力されません。つまり、change()イベントが正しく動作していないわけです。

    実は、テキストボックスはval()で文字列を代入してもchange()イベントが動作しない仕様になっています。そこで、このような時は前章でも説明した「引数なし」のchange()を実行すれば良いのです!

    $('button').click(function() {
    
        $('input').val('こんにちは').change();
    
    })

    このように、val()で文字列を代入したあとにchange()を実行すれば、意図的にchange()イベントを動作させることができるわけです。

    このようなchange()の使い方も場合によっては重要なので覚えておきましょう!

    まとめ

    今回は、フォーム要素の内容が変更された時にイベント処理を実行できる「change()」について学習しました!

    最後に、もう一度ポイントをおさらいしておきましょう!

  • 主に、input / select / textareaなどの要素に変更があった時にchange()は有効活用できる
  • 「引数なし」のchange()は、意図的にchangeイベントを実行することができる
  • val()を使ってテキストボックスの文字列を変更する場合はchange()の使い方に注意する
  • 上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

    LINEで送る
    Pocket

    ITエンジニアへ転職したい方におすすめ

    自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
    エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

    しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

    こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

    そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

    侍ワークスは、独自案件を多く掲載しているだけでなく、

    ・応募から就業まで一貫したサポート

    ・就業後もアフターフォロー

    といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

    まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

    書いた人

    マサト

    マサト

    フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
    独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。