スライドショー

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

    無料でSEからWebエンジニアへ転職しませんか?



    侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

    • システムエンジニアという職業だけどコードが書けない
    • 事務作業が多くスキルがないため将来が不安
    • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
    という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

    弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

    既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

    まずは無料体験レッスンを予約する

    書いた人

    マサト

    マサト

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

    おすすめコンテンツ

    あなたにぴったりなプログラミング学習プランを無料で診断!

    プログラミング学習の効率を劇的に上げる学習メソッドを解説