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

<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">項目１
    <option value="2">項目２
    <option value="3">項目３
    <option value="4">項目４
    <option value="5">項目５
  </select>
  <select id="idSelect2" size="5">
    <option value="A">項目Ａ
    <option value="B">項目Ｂ
    <option value="C">項目Ｃ
    <option value="D">項目Ｄ
    <option value="E">項目Ｅ
  </select>
  <select id="idSelect3" size="5" multiple>
    <option value="AA">項目ＡＡ
    <option value="BB" selected>項目ＢＢ
    <option value="CC">項目ＣＣ
    <option value="DD" selected>項目ＤＤ
    <option value="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>

checkbox

radio (1) radio (2)

textarea

項目１項目２項目３項目４項目５ 項目Ａ項目Ｂ項目Ｃ項目Ｄ項目Ｅ 項目ＡＡ項目ＢＢ項目ＣＣ項目ＤＤ項目ＥＥ

.change() 実行JavaScript による変更 (イベント発生なし)

【出力】