jQueryのchange()で値が変更されたら発動

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryのchange()はテキストボックスやチェックボックスのvalue値が変更されたら、その時点で発動してくれます。

プルダウンを切り替えるたびに発動させたり、テキストボックスに変更を加えるたびに処理させたり、ボタンをクリックしなくても発動させることができるので便利ですね。

動的に追加したフォームにもchange()を適用させる方法もご紹介します。

change()の使い方

構文

jQuery

セレクタに続けてchange()を指定し、引数のfunction()に値が変更されたときの処理を記述します。

セレクトボックスを切り替えるたびにvalue値を出力

それではchange()を使ってプルダウンメニューを切り替えたら、選択したvalue値を出力させてみましょう

HTML

jQuery

結果(動作サンプル)

下記セレクトボックスを切り替えるたびに、選択したvaule値が出力されるかと思います。


 

$(this)text()の使い方は以下で解説しています。

参考:jQueryの$(this)の使い方
参考:jQueryのtext()で

ラジオボタンをチェックするたびにvalue値を出力

ラジオボタンもchange()で取得できます。

HTML

jQuery

結果(動作サンプル)

下記ラジオボタンをチェックするたびに、選択したvaule値が出力されるかと思います。

男性
女性
 

$('input[type="radio"]')の部分がラジオボタンを選択するセレクタになります。

:radioをセレクタに付ける方法もありますが、こういったフィルタをつかったセレクタは動作が重くなるため、上記の方法やname属性、id属性を使った要素の指定方法がオススメです。

参考:jQueryでname属性の取得

チェックボックスをチェックするたびに値を取得

チェックボックスでもchange()を使って、値を取得できます。

詳しくは以下で解説しています。

参考:jQueryでチェックボックスを操作するさまざまな方法

テキストボックスでchange()を使った場合

テキストボックスやテキストエリアに変更を加えた場合、即時に反映しません。

フォーカスが外れたら反映されるため、blur()と同じ動作になります。

HTML

jQuery

結果(動作サンプル)

下記テキストボックスに入力し、別の所をクリックするなどしてフォーカスを外したら値が出力されるかと思います。


 

フォーカスを外さないと反映されないため、リアルタイム性に欠けますね。

リアルタイムに変更を出力したい場合はkeyup()を使うとよいでしょう。

テキストボックスでkeyup()を使ってリアルタイムに反映

keyup()はキーを押すたびに反映するため、1文字ずつリアルタイムに発動します。

HTML

jQuery

結果(動作サンプル)

下記テキストボックスにキーを押して入力するたびに、1文字ずつ出力されるかと思います。


 

リアルタイムに変更を出力したい場合はkeyup()を使うとよいでしょう。

動的に追加した要素でchange()

上記のように最初から存在する要素では問題なく動作しますが、jQueryで追加した動的な要素は上記サンプルのようなchange()では動作しません。

以下サンプルでご確認ください。

動作しない普通のchange()

動的に追加した要素で、上記サンプルでご紹介したようなchange()を使っても以下のように何も起きません。

HTML

jQuery

結果(動作サンプル)

以下のボタンをクリックすると新しいラジオボタンが出てくるので、それをチェックしてみてください。

何も起きないはずです。

男性 女性 
 

フォーカスを外しても何も反応しませんが、DOM読み込み時にはまだ存在していなかった要素なので、動作しないんですね。

以下のようにon()を使えば動的に追加した要素でも動作します。

動作するon()を使ったchange()

今度は動的に追加した要素でon()を使ったので動作します。

jQuery

結果(動作サンプル)

以下のボタンをクリックすると新しいラジオボタンが出てくるので、それをチェックしてみてください。

今度はテキストが出力されるはずです。

男性 女性 
 

3番目のラジオボタンの値は出力されましたか?

どう違うのか見てみましょう。

両者の違い

//動的に生成したボタンで普通のchange()を発動
$(‘input[type=”radio”]’).change(function() {
//動的に生成した要素をon()を使って発動
$(‘div’).on(‘change’, ‘input[type=”radio”]’, function() {

on()を使って発動した方は、イベント名のchangeとテキストボックスのinput[type="radio"]on()の引数に指定されていて、セレクタは静的な親要素を指定しています。

on()で設定するセレクタは静的な祖先要素であれば動作するので、documentじゃなく直近の親要素を指定するとパフォーマンスも若干良くなるでしょう

動的に追加したクリックイベントではon()を使いましょう。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*