jQuery - changeイベント
公開日：2018-12-21
更新日：2019-05-14
更新日：2019-05-14
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>
値を変更すると、画面の一番下に変更した値が表示されます。
実行結果：画面
