ZeroPlus Media > Web制作 > JavaScript > 【jQuery】フォーム要素でイベント発火させるchange()イベントを解説

【jQuery】フォーム要素でイベント発火させるchange()イベントを解説

JavaScript

2022/05/09

2023/05/06

jQueryにはフォーム要素に変更を加えることでイベントが発生するchange()イベントがあります。

様々なイベントを学ぶことで制作の幅が広がるので、知識として身に付けていきましょう！

この記事では「jQueryのchange()イベントの使い方」について解説します。

この記事で身につく内容

change()イベントの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

change()イベント：フォーム要素の内容が変更されたときにイベント発火

change()は、jQueryの数あるイベントの一つ。input、select、textareaなどフォーム要素の内容が変更されたときにイベントが発火します。

change()イベントの基本書式

$("フォーム要素").change(function(){
  // ここに処理の内容を書く
});

上の書式にコードを当てはめると下のようになります。

change()イベントのサンプル

  <input type="text" placeholder="文章を入力する">

$('input').change(function () {
  $('input').css('background', 'red');
});

出力結果

inputのフォームに文章を入力すると、change()イベントによってCSSメソッドが発火して背景色が変わります。

radio、textarea、select要素でchange()イベント発火

ラジオボタンのradio、複数行入力できるtextarea、セレクト要素のselectそれぞれでもchange()でイベントを発火することができます。

コードは次のようになります。

  <input class="radio" type="radio">

  <input class="textarea" type="textarea" placeholder="文章を入力する">

  <select>
    <option value="">メニュー1</option>
    <option value="">メニュー2</option>
    <option value="">メニュー3</option>
  </select>

  <p class="radio-text">ラジオボタンが選択されました。</p>
  <p class="select-text">メニューが選択されました。</p>

$('.radio').change(function () {
  $('.radio-text').css('color', 'red');
});

$('.textarea').change(function () {
  $('.textarea').css('background', 'red');
});

$('select').change(function () {
  $('.select-text').css('color', 'red');
});

出力結果