John John - 1 year ago 65
HTML Question

On input event on form doesn't fire when checkbox changes

The title pretty much say it all. To reiterate, when I have the listener

assigned to a form, the event fires for
changes, but it doesn't fire for checkbox changes.

Here's a fiddle of what I'm talking about:

<form class='request-form'>
<input type='text'>
<label><input type="checkbox" name="not-completed" checked>Not Completed</label>

<div class='put-stuff-in-here'>


var i=0;
$(".request-form").on('input', function() {

$(".put-stuff-in-here").append(i + "<br>");


Is there a way I can make a listener that will fire for all input changes in a form?

Answer Source

Your input event won't fire the checkboxes, but we can handle it with a change event. Although we'll need to separate the listeners, we can have them call a mutual function so that any changes that need to be made to both only have to happen in one place.

function changeFunction(elem) {
    $(".put-stuff-in-here").append(i + "<br>");

$('.request-form input[type="checkbox"], .request-form select').change(function() {

$('.request-form input[type="text"]').on('input', function() {


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download