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

プルダウンなどをを切り替えるたびにイベントを発行させ、テキストボックスに変更を加えるたびに処理させたり、なにか処理をしたいときに便利です。

今回の記事では、jQueryのchange()のイベント処理について紹介します。

jQueryのchange()の使い方

構文

$(セレクタ).change(function() {
  //セレクタの値が変更された時の処理
});

jQueryのchange()は、上記のような構文となります。
セレクタに続けて、change()を指定し、function内にセレクタの値が変更された時も処理を記載します。

selectboxの値が変更されたときにの処理

<select name="name">
  <option value="田中">田中</option>
  <option value="村田">村田</option>
  <option value="米澤">米澤</option>
</select>
 
<!--テキスト出力用要素-->
<p id="test"></p>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
  //セレクトボックスが切り替わったらイベントを発行
  $('select').change(function() {
    var val = $('select').val();
    $('#test').text(val);
  });
});
</script>

checkboxを変更した時の処理

checkboxを使用した場合にも簡単に、jQueryのchange()メドッドを利用することが出来ます。

<p><input type="checkbox" name="check" value="I">I</p>
<p><input type="checkbox" name="check" value="MY">MY</p>
<p><input type="checkbox" name="check" value="ME">ME</p>
 
<div id="check"></div>

<script>
$(function() {
  //テキストボックスに変更したら処理を実行
  $('input[name="check"]').change(function() {
    var val = $(this).val();
    $('#check').text(val);
  });
});
</script>

radioボタンを変更した時の処理

radioボタンもchange()メソッドを使用することが出来ます。

<input type="radio" name="city" value="千葉">千葉
<input type="radio" name="city" value="埼玉">埼玉
<!--テキスト出力用要素-->
<div id="city"></div>

<script>
$(function() {
  //ラジオボタンをチェックしたら処理を実行
  $('input[type="radio"]').change(function() {
    var val = $('input[type="radio"]').val();
    //選択したvalue値をセレクタに出力
    $('#city').text(val);
  });
});
</script>

テキストエリアを変更した時の処理

テキストエリアでもchange()メソッドを使用することが出来ます。

<input type="text" name="name">
 
<div id="name"></div>

<script>
$(function() { 
  $('input[type="text"]').change(function() { 
    var val = $(this).val();
    $('#name').text(val);
  });
});

まとめ

今回は、フォーム要素の内容が変更された時にイベント処理を実行できるjQueryのchange()メソッドについて紹介しました。
フォームないのテキストエリアの値を変更したい際などに、処理を実行したいときなどよくあると思います。
jQueryでこんなことができると知っていると良い知識だと思います。