2024.06.18

【jQuery】change()メソッドでフォーム内の要素が変更された時にイベント処理を実行する

「テキストボックスに入力された時」や「ラジオボタンやセレクトボックス内の選択肢が選択された時」などに動作をつけたい時は、jQueryのchange()メソッドを使うことで簡単に実装することができます。

changeメソッドとは？

changeメソッドは、値が変更された時にイベントを発生させるためのメソッドです。
※メソッドは簡単に説明すると、動きや処理を行うための方法のこと。

主に、フォーム内の要素(inputやselectなど)の内容が変更された時に何かしらのイベント処理を実行させるために使用されます。

まずは、テキストボックスが変更された時に動きをつけてみましょう。

以下Codepen内のテキストボックスに何でもいいので入力してみてください。

入力されたら、inputタグ下のpタグに入力した内容が表示されます。
input内に入力された内容のこと「値(value)」といいます。

書き換えるたびにpタグ内のテキストは更新されます。

$('input').change(function(){～});

inputが変更されたら{～}内の処理をする、という意味です。

$('p').text($(this).val());

{～}内の記述です。変更された時の動作を記述します。

今回は、pタグ内に変更されたinput内の値を表示するという動きをつけています。

pタグなどの要素内にテキストを追加するには、text()メソッドを使用します。

入力された値を取得するには、val()メソッドを使用します。

続いて、セレクトボックスが変更された時に動きをつけてみましょう。

option:selectedで、選択された選択肢を判断し、そのvalue値をpタグ内に表示させています。

「フルーツ」はoptionのvalue内を空にすることで、セレクトボックスの見出しとして使用しています。

まずは、ラジオボタンが変更された時に動きをつけてみましょう。

jQueryの記述はテキストボックスと同じですね！

ラジオボタンにのみこの動作をつけたい場合は、$('input=[type="radio"]').change(function(){～}とすることで、inputタグのラジオボタンのみを指定することができます。

実際に使用する場合はフォーム内にテキストボックスやラジオボタンなどinputタグが混在していると思いますので、場合によってはclassを指定するなど書き分ける必要もあるでしょう。

以上、changeメソッドの使い方でした。

changeメソッドを使用すれば、よりユーザビリティの高いフォームを作ることができるでしょう。

ぜひご参考の上、ご活用ください。

この記事をシェアする

【勝手にWEBサイトレビュー #15】見せ方が斬新な旅行の写真まとめサイト

【勝手にWEBサイトレビュー #16】イラストとペイントの融合がかわいいロシアの…