.change()【《変更》イベントハンドラ設定・実行】

メモ

構文

説明構文戻り値
《変更》
イベントハンドラ設定
.change( handler ) 1.0

handler:イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5:基本DOM要素 参照)
戻り値説明
false
その他
.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行

.on( "change", handler )の省略形
jQuery
.change( [eventData ], handler ) 1.4.3

Anything eventData:イベントデータ
handler:イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(イベントデータは、eventObject.data で参照)
(this)該当要素 (HTML5:基本DOM要素 参照)
戻り値説明
false
その他
.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行

.on( "change", data, handler )の省略形
jQuery
《変更》
イベントハンドラ実行
.change() 1.0

.trigger( "change" )の省略形
jQuery

関連

<p><input id="idText" type="text" value="text"></p>
<p><label><input id="idCheckbox" type="checkbox">checkbox</label></p>
<p>
  <label><input name="nameRadio" type="radio" value="1" checked>radio (1)</label>
  <label><input name="nameRadio" type="radio" value="2">radio (2)</label>
</p>
<p><textarea id="idTextarea">textarea</textarea></p>
<p>
  <select id="idSelect1" size="1">
    <option value="1">項目1
    <option value="2">項目2
    <option value="3">項目3
    <option value="4">項目4
    <option value="5">項目5
  </select>
  <select id="idSelect2" size="5">
    <option value="A">項目A
    <option value="B">項目B
    <option value="C">項目C
    <option value="D">項目D
    <option value="E">項目E
  </select>
  <select id="idSelect3" size="5" multiple>
    <option value="AA">項目AA
    <option value="BB" selected>項目BB
    <option value="CC">項目CC
    <option value="DD" selected>項目DD
    <option value="EE">項目EE
  </select>
</p>
<p>
  <button id="idButtunA" type="button">.change() 実行</button>
  <button id="idButtunB" type="button">JavaScript による変更 (イベント発生なし)</button>
</p>
<p><textarea id="output" style="width:300px; height:200px;">【出力】</textarea></p>

<script>
function output(msg) {
  $output = $("#output");
  $output.val($output.val() + "\n" + msg);
}

// <input type="text">
$("#idText").change(function(eventObject) {
  output(eventObject.type + "[" + this.id + "]");
});

// <input type="checkbox">
$("#idCheckbox").change(function(eventObject) {
  var checked1 = this.checked;
  var checked2 = $(this).prop("checked");
  var checked3 = $(this).is(":checked");
  output(eventObject.type + "[" + this.id + "] " + checked1 + " / " + checked2 + " / " + checked3);
});

// <input type="radio">
$("[name='nameRadio']").change(function(eventObject) {
  output(eventObject.type + " [" + this.name + "] (" + $("[name=nameRadio]:checked").val() + ")");
});

// <textarea>
$("#idTextarea").change(function(eventObject) {
  output(eventObject.type + " [" + this.id + "]");
});

// <select>
$("#idSelect1").change(function(eventObject) {
  output(eventObject.type + " [" + this.id + "] (" + $(this).val() + ")");
});
$("#idSelect2").change(function(eventObject) {
  output(eventObject.type + " [" + this.id + "] (" + $(this).val() + ")");
});

// <select multiple>
$("#idSelect3").change(function (eventObject) {
  var values = $(this).val();
  output(eventObject.type + " [" + this.id + "] (" + values.length + ") [ " + values.join(", ") + " ]");
});

// .change() 実行
$("#idButtunA").click(function() {
  $("#idText").change();
  $("#idCheckbox").change();
  $("[name='nameRadio']").change();
  $("#idTextarea").change();
  $("#idSelect1").change();
  $("#idSelect2").change();
  $("#idSelect3").change();
});

// JavaScript による変更
$("#idButtunB").click(function() {
  $("#idText").val($("#idText").val() + " (text)");
  var $checkbox = $("#idCheckbox");
  if ($checkbox.prop("checked")) {
    $checkbox.prop("checked", false);
  }
  else {
    $checkbox.prop("checked", true);
  }
  if ($("[name=nameRadio]:checked").val() === "1") {
    $("[name=nameRadio]").val(["2"]);
  }
  else {
    $("[name=nameRadio]").val(["1"]);
  }
  $("#idTextarea").val($("#idTextarea").val() + "\n(textarea)");
  $("#idSelect1").val("2");
  $("#idSelect2").val("B");
  $("#idSelect3").val(["AA", "CC", "EE"]);
});
</script>