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

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

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

changeメソッドとは?

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

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

テキストボックスが変更されたらイベント発動

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

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

See the Pen input(テキストボックス)が変更されたらイベント発動 by spiqa design (@spiqa_design) on CodePen.

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

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

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

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

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

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

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

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

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

セレクトボックスが変更されたらイベント発動

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

See the Pen selectが変更されたらイベント発動 by spiqa design (@spiqa_design) on CodePen.

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

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

ラジオボタンが変更されたらイベント発動

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

See the Pen input(ラジオボタン)が変更されたらイベント発動 by spiqa design (@spiqa_design) on CodePen.

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

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

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

change()メソッドの使い方まとめ

  • change()メソッドは主にフォーム内の要素(input、selectなど)が変更された時のイベント処理を実行する際に使用される
  • 入力された値を取得するにはval()メソッドを使用する

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

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

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

この記事をシェアする

関連記事

おすすめ記事

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

© 2020 spiqa design

×