jQuery - changeイベント

公開日：2018-12-21 更新日：2019-05-14
[jQuery]

1. 概要

テキストボックス、ラジオボタン、セレクトボックス、チェックボックスなどの値が変更されると、change イベントが発生し、任意の処理を実行することができます。

$(セレクタ).on("change", function(e) {
	処理;
});

2.1 サンプル

テキストボックスの場合は、フォーカスを移動した時点でイベントが発生します。
値を入力している段階では、イベントは発生しません。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <input type="text" /><br /><br />
  <div id="msg"></div>
  <script>
    $(function(){

      $(":text").on("change", function(e) {
        //入力値の取得
        var value = $(this).val()

        //画面表示
        $("#msg").html( value );
      });

    });
  </script>
</body></html>

テキストに何か入力して、他の場所をクリックしてフォーカスを移動すると、入力値が画面に表示されます。
実行結果：画面


2.2 サンプル

ラジオボタン、セレクトボックス、チェックボックスは、値を変更した時点で change イベントが発生します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  
  <input type="checkbox" id="chk1" />チェックボックス<br /><br />
  <hr />

  <input type="radio" name="fruits" id="fruits1" value="A" />apple
  <input type="radio" name="fruits" id="fruits2" value="B" />orange
  <input type="radio" name="fruits" id="fruits3" value="C" />banana
  <hr />

  <select size="3">
    <option value="A">apple</option>
    <option value="B">orange</option>
    <option value="C">banana</option>
  </select>
  <hr />

  <textarea id="text" cols="40" rows="5"></textarea><br />
  <hr />

  <div id="msg"></div>
  <script>
    $(function(){

      $(":checkbox").on("change", function(e) {
        $("#msg").html( $(this).prop("checked") );
      });

      $(":radio").on("change", function(e) {
        $("#msg").html( $(this).val() );
      });

      $("select").on("change", function(e) {
        $("#msg").html( $(this).val() );
      });
      
      $("textarea").on("change", function(e) {
        $("#msg").html( $(this).val() );
      });
    });

  </script>
</body></html>

値を変更すると、画面の一番下に変更した値が表示されます。
実行結果：画面



Tag

New Article