「change()」とは?基本的な使い方selectボックスを使うradioボタンを使う複数の要素を扱うという基本的な内容から、changeイベントを発生させるには?changeイベントが発火しない場合などの応用的な使い方に関しても解説していきます。textareaなどの要素の中身が変更された際にイベント処理を実行することができます。name="test">この例では、単純なラジオボタンが3つ配置されています。change()を使うと、いずれかのラジオボタンがクリックされた瞬間に何らかのイベント処理を自動的に実行することが出来るわけです。他にも、セレクトボックスから任意の項目を選択した時や、入力ボックスに文字が入力されてフォーカスが外れた瞬間に実行することも可能です。】のように引数へイベント実行用の関数を指定すればOKです。});</script></body>この例では、テキストボックスが1つ配置されています。そこで、何か文字を入力したあとに「エンターキー」を押すか、画面をクリックしてフォーカスを外してみましょう。コンソールログに入力した文字列が出力されるはずです。テキストボックス内に何らかの文字列が入力されることで、要素の変化を検知してイベントを自動的に実行してくれるわけです。selectボックスを使う次に、「selectボックス」を使った事例を見てみましょう!selectボックスは、複数の選択肢の中からユーザーが1つ選ぶことができるフォーム部品です。そこで、選んだ項目をchange()を使ってコンソールログに出力してみましょう!次のサンプル例を見てください。});</script></body>この例では、3つの選択肢を用意したselectボックスを配置しています。そこで、change()を使い「$('option:selected').text()」と記述することで選んだ項目のテキストを抽出しています。このように記述すれば、ユーザーが1つ選ぶたびにコンソールログに文字列が出力されるようになるというわけです。radioボタンを使う今度は、「radioボタン」を使ってみましょう!いずれかのradioボタンを選んだ際に、value属性値をコンソールログに出力してみます。});</script></body>この例では、3つのradioボタンを配置しておりそれぞれにvalue属性値を設定しています。change()を使って、「$(this).val()」と記述することにより選択したradioボタンのvalue属性値を検出しているのが分かりますね。これにより、radioボタンを選択するたびにコンソールログへvalueの値が出力されるというわけです。複数の要素を扱うこれまで、1つの要素に対してchange()を使ってきましたが、複数の要素に対して利用することも可能なのでご紹介しておきます。この複数の要素というのは、例えば「input要素」と「select要素」で同じchange()を使ったイベント処理を実行したいようなケースで有効です。});</script></body>この例では、単純なinput要素とselect要素が配置されています。select')」と記述することで、input要素とselect要素の両方に対応したchange()のイベント処理を実現しているわけです。実行内容が同じであれば、個別にchange()を記述するよりも効率が良いので覚えておくようにしましょう!changeイベントを発生させるには?change()は引数を無しにすると、changeイベントを意図的に発生させることができます。ボタンをクリックしたらinput要素のchange()イベントを実行する...というようなことも実現できるのです。})</script></body>この例では、input要素とボタンが配置されています。input要素にはchange()を使ったイベント処理が実装されていますよね?そして、ボタン要素にはクリックイベント処理が実装されています。テキストボックスに何か入力したあとにフォーカスを外すと、コンソールログに文字列が出力されるのはこれまで通りです。ところが、ボタンをクリックしても同じようにchange()イベントが実行されて文字列が出力されるのです!これはつまり、ボタンのクリックイベント内で「change()」を実行しているからなのです。このように引数なしのchange()を記述すれば、任意のタイミングでchangeイベントが実行できるので忘れないようにしましょう!changeイベントが発火しない場合change()イベントは使い方によっては正常に動作せず、意図したとおりにならないケースもあります。$('input').val('こんにちは');})</script></body>この例では、テキストボックスとボタン要素が配置されていますね。テキストボックスに文字列を入力してフォーカスを外すとコンソールログに「変更されました!」という文字列が出力されます。ボタンをクリックするとval()を使って「こんにちは」という文字列をテキストボックスへ入力します。この時にフォーカスを外してもコンソールログに「変更されました!」という文字列は出力されません。change()イベントが正しく動作していないわけです。実は、テキストボックスはval()で文字列を代入してもchange()イベントが動作しない仕様になっています。$('input').val('こんにちは').change();})このように、val()で文字列を代入したあとにchange()を実行すれば、意図的にchange()イベントを動作させることができるわけです。textareaなどの要素に変更があった時にchange()は有効活用できる「引数なし」のchange()は、意図的にchangeイベントを実行することができるval()を使ってテキストボックスの文字列を変更する場合はchange()の使い方に注意する上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。