jQueryのchange()はテキストボックスやチェックボックスのvalue値が変更されたら、その時点で発動してくれます。
プルダウンを切り替えるたびに発動させたり、テキストボックスに変更を加えるたびに処理させたり、ボタンをクリックしなくても発動させることができるので便利ですね。
動的に追加したフォームにもchange()を適用させる方法もご紹介します。
目次
change()の使い方
構文
jQuery
|
1 2 3 |
$(セレクタ).change(function() { //値が変更されたときの処理 }); |
セレクタに続けてchange()を指定し、引数のfunction()に値が変更されたときの処理を記述します。
セレクトボックスを切り替えるたびにvalue値を出力
それではchange()を使ってプルダウンメニューを切り替えたら、選択したvalue値を出力させてみましょう
HTML
|
1 2 3 4 5 6 7 8 |
<select name="city"> <option value="takasaki">高崎</option> <option value="maebashi">前橋</option> <option value="ota">太田</option> </select> <!--テキスト出力用要素--> <p></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { //セレクトボックスが切り替わったら発動 $('select').change(function() { //選択したvalue値を変数に格納 var val = $(this).val(); //選択したvalue値をp要素に出力 $('p').text(val); }); }); |
結果（動作サンプル）
下記セレクトボックスを切り替えるたびに、選択したvaule値が出力されるかと思います。
$(this)やtext()の使い方は以下で解説しています。
参考：jQueryの$(this)の使い方
参考：jQueryのtext()で
ラジオボタンをチェックするたびにvalue値を出力
ラジオボタンもchange()で取得できます。
HTML
|
1 2 3 4 |
<input type="radio" name="gender" value="man">男性 <input type="radio" name="gender" value="woman">女性 <!--テキスト出力用要素--> <p></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { //ラジオボタンをチェックしたら発動 $('input[type="radio"]').change(function() { //選択したvalue値を変数に格納 var val = $(this).val(); //選択したvalue値をp要素に出力 $('p').text(val); }); }); |
結果（動作サンプル）
下記ラジオボタンをチェックするたびに、選択したvaule値が出力されるかと思います。
男性
女性
$('input[type="radio"]')の部分がラジオボタンを選択するセレクタになります。
:radioをセレクタに付ける方法もありますが、こういったフィルタをつかったセレクタは動作が重くなるため、上記の方法やname属性、id属性を使った要素の指定方法がオススメです。
チェックボックスをチェックするたびに値を取得
チェックボックスでもchange()を使って、値を取得できます。
詳しくは以下で解説しています。
参考：jQueryでチェックボックスを操作するさまざまな方法
テキストボックスでchange()を使った場合
テキストボックスやテキストエリアに変更を加えた場合、即時に反映しません。
フォーカスが外れたら反映されるため、blur()と同じ動作になります。
HTML
|
1 2 3 4 |
<input type="text" name="name"> <!--テキスト出力用要素--> <p></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { //テキストボックスに変更を加えたら発動 $('input[type="text"]').change(function() { //入力したvalue値を変数に格納 var val = $(this).val(); //選択したvalue値をp要素に出力 $('p').text(val); }); }); |
結果（動作サンプル）
下記テキストボックスに入力し、別の所をクリックするなどしてフォーカスを外したら値が出力されるかと思います。
フォーカスを外さないと反映されないため、リアルタイム性に欠けますね。
リアルタイムに変更を出力したい場合はkeyup()を使うとよいでしょう。
テキストボックスでkeyup()を使ってリアルタイムに反映
keyup()はキーを押すたびに反映するため、1文字ずつリアルタイムに発動します。
HTML
|
1 2 3 4 |
<input type="text" name="name"> <!--テキスト出力用要素--> <p></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { //keyup()でキーを入力するたびに発動 $('input[type="text"]').keyup(function() { //入力したvalue値を変数に格納 var val = $(this).val(); //選択したvalue値をp要素に出力 $('p').text(val); }); }); |
結果（動作サンプル）
下記テキストボックスにキーを押して入力するたびに、1文字ずつ出力されるかと思います。
リアルタイムに変更を出力したい場合はkeyup()を使うとよいでしょう。
動的に追加した要素でchange()
上記のように最初から存在する要素では問題なく動作しますが、jQueryで追加した動的な要素は上記サンプルのようなchange()では動作しません。
以下サンプルでご確認ください。
動作しない普通のchange()
動的に追加した要素で、上記サンプルでご紹介したようなchange()を使っても以下のように何も起きません。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div> <input type="radio" name="gender" value="man">男性 <input type="radio" name="gender" value="woman">女性 </div> <!--テキスト出力用要素--> <p></p> <button>追加！</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //div要素にテキストボックスを追加 $('div').append('<input type="text" name="text_box">'); }); //上で生成した要素に普通のchange()を発動 $('input[type="radio"]').change(function() { //選択したvalue値を変数に格納 var val = $(this).val(); //選択したvalue値をp要素に出力 $('p').text(val); }); }); |
結果（動作サンプル）
以下のボタンをクリックすると新しいラジオボタンが出てくるので、それをチェックしてみてください。
何も起きないはずです。
男性 女性
フォーカスを外しても何も反応しませんが、DOM読み込み時にはまだ存在していなかった要素なので、動作しないんですね。
以下のようにon()を使えば動的に追加した要素でも動作します。
動作するon()を使ったchange()
今度は動的に追加した要素でon()を使ったので動作します。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //div要素にテキストボックスを追加 $('div').append('<input type="text" name="text_box">'); }); //上で生成した要素をon()を使って発動 $('div').on('change', 'input[type="radio"]', function() { //選択したvalue値を変数に格納 var val = $(this).val(); //選択したvalue値をp要素に出力 $('p').text(val); }); }); |
結果（動作サンプル）
以下のボタンをクリックすると新しいラジオボタンが出てくるので、それをチェックしてみてください。
今度はテキストが出力されるはずです。
男性 女性
3番目のラジオボタンの値は出力されましたか？
どう違うのか見てみましょう。
両者の違い
//動的に生成したボタンで普通のchange()を発動
$(‘input[type=”radio”]’).change(function() {
//動的に生成した要素をon()を使って発動
$(‘div’).on(‘change’, ‘input[type=”radio”]’, function() {
on()を使って発動した方は、イベント名のchangeとテキストボックスのinput[type="radio"]がon()の引数に指定されていて、セレクタは静的な親要素を指定しています。
on()で設定するセレクタは静的な祖先要素であれば動作するので、documentじゃなく直近の親要素を指定するとパフォーマンスも若干良くなるでしょう
動的に追加したクリックイベントではon()を使いましょう。
