JavaScript

2021.03.03

【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メソッドを使用すれば、よりユーザビリティの高いフォームを作ることができるでしょう。

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

この記事をシェアする

関連記事

  • 2021.04.06

    【jQuery】全画面表示のナビゲーションメニューを実装する

    JavaScript

  • 2021.04.05

    【簡単レスポンシブ対応】jQueryのみでPC/SP(スマートフォン)の画像を切り替える方法

    JavaScript

  • 2021.03.30

    【jQuery】text()メソッドでHTML要素内のテキストを操作する

    HTML5

    JavaScript

おすすめ記事

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

×