How to handle when checkbox 'checked state' changed event in jQuery?

jQueryWeb DevelopmentFront End Technology

To handle the checkbox checked state, use the change event. It will check whether the checkox is checked or not.


You can try to run the following code to learn how to handle when checkbox checked state changed event in jQuery −

Live Demo

<!doctype html>
  <title>jQuery Checkbox state</title>
  b {
    color: red;
  <script src=""></script>
<input id="checkbox1" type="checkbox" checked="checked">
<label for="checkbox1">Check/ Uncheck this checkbox</label>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $ ":checked" ) + "</b>" );
Updated on 14-Feb-2020 12:48:52