jQuery Change Event

What Is the change Event?

The change event fires when an input, select, or textarea value changes. Bind with .on("change", handler) (since jQuery 1.7). Selects / checkboxes / radios fire immediately; text fields fire after the value changed and the field loses focus.

$(".target").on("change", function () {
  // value committed / selection changed
});

$(".target").trigger("change");   // fire in code

// .val() does NOT fire change — trigger after script updates
$("#country").val("US").trigger("change");

// Legacy shorthand: .change() — prefer .on / .trigger

How to Use change

Bind on controls whose committed value should drive UI or logic.

1. Select input, select, or textarea elements.
2. Call .on("change", handler) — optional eventData before the handler.
3. In the handler, read $(this).val() (or selected option text).
4. Remember timing: select/checkbox = immediate; text = on blur if value changed.
5. After .val(), call .trigger("change") if handlers must run.

Pseudocode

element.on("change", handler)

when user changes value:
    if select / checkbox / radio:
        fire change immediately
    if text / textarea:
        fire change on blur only if value differs

when script sets .val(newValue):
    change does NOT fire
    call element.trigger("change") if handlers must run

// Bubbles — parent .on("change", "select", fn) works for delegation

Cheat Sheet

Keep these facts handy while wiring form UX.

Live Preview

Change the select or edit the text and leave the field — same idea as the official jQuery API demos. Compare silent .val() vs trigger.

Ready — pick an action or change a control.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$(".target").on("change", function () {
  $("#out").text(
    "change on #" + this.id + " → " + $(this).val()
  );
});

change on #select → Option 2
— or (after edit + leave text) —
change on #text → hello world

$(".target").on("change", function () {
  $("#out").text("change handler ran on #" + this.id);
});

$("#other").on("click", function () {
  $(".target").trigger("change");
});

Click button → handler runs for each .target
(two lines if both text and select match)

$("#flavor")
  .on("change", function () {
    var text = $("#flavor option:selected").text();
    $("#out").text("You picked: " + text);
  })
  .trigger("change");

On load → You picked: Chocolate
User picks Candy → You picked: Candy

$("#tier").on("change", function () {
  $("#out").text("Tier is now: " + $(this).val());
});

$("#set-silent").on("click", function () {
  $("#tier").val("pro");
  $("#out").text("Silent .val — handler did not run.");
});

$("#set-trigger").on("click", function () {
  $("#tier").val("enterprise").trigger("change");
});

.val("pro") → Silent .val — handler did not run.
.val("enterprise").trigger("change") → Tier is now: enterprise

$("#plan").on("change", { currency: "USD" }, function (event) {
  $("#out").text(
    "Plan: " + $(this).val() + " | " + event.data.currency
  );
});

Plan: pro | USD

Performance Notes

Change handlers run only when a value is committed (or you trigger). Keep them short — update a label or toggle UI — and avoid network calls on every change unless you debounce.

Key Takeaways