jQuery on Change Function

John on January 28, 2021

To look for a change in a value and call a function with jQuery, use the change() method and pass the function to use as the first argument.

<label for="monday">Monday</label>
<input type="radio" name="day" id="monday">

<label for="tuesday">Tuesday</label>
<input type="radio" name="day" id="tuesday">

<label for="wednesday">Wednesday</label>
<input type="radio" name="day" id="wednesday">

$('input').change(function() {
  console.log('The value of the radio buttons changed');
});

The value of the radio buttons changed

Getting the Element that Changed

To get the element that changed, use the this keyword inside a jQuery selector. To demonstrate this, let's get the ID of the radio button that is selected on click using the prop() method:

<label for="monday">Monday</label>
<input type="radio" name="day" id="monday">

<label for="tuesday">Tuesday</label>
<input type="radio" name="day" id="tuesday">

<label for="wednesday">Wednesday</label>
<input type="radio" name="day" id="wednesday">

$('input').change(function() {
  console.log($(this).prop('id'));
});

tuesday