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


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

Example

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>
<html>
<head>
  <title>jQuery Checkbox state</title>
  <style>
  b {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="checkbox1" type="checkbox" checked="checked">
<label for="checkbox1">Check/ Uncheck this checkbox</label>
<p></p>
 
<script>
$( "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>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

Updated on: 14-Feb-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements