jQuery checkbox event handling

Question

I have the following    lt form id  myform  gt      lt input type  checkbox  name  check1  value  check1  gt      lt input type  checkbox  name  check2  value  check2  gt   lt  form gt    How do I use jQuery to capture any check event occuring in myform and tell which checkbox was toggled  and know if it was toggled on or off

User · Answer

myform input checkbox   click   function e      alert   this  is   checked

User · Answer

There are several useful answers  but none seem to cover all the latest options  To that end all my examples also cater for the presence of matching label elements and also allow you to dynamically add checkboxes and see the results in a side-panel  by redirecting console log     Listening for click events on checkboxes is not a good idea as that will not allow for keyboard toggling or for changes made where a matching label element was clicked  Always listen for the change event  Use the jQuery  checkbox pseudo-selector  rather than input type checkbox    checkbox is shorter and more readable  Use is   with the jQuery  checked pseudo-selector to test for whether a checkbox is checked  This is guaranteed to work across all browsers    Basic event handler attached to existing elements       myform  checkbox   change function          if    this  is   checked              console log   this  val       is now checked          else           console log   this  val       is now unchecked                JSFiddle  http   jsfiddle net TrueBlueAussie u8bcggfL 2   Notes    Uses the  checkbox selector  which is preferable to using input type checkbox  This connects only to matching elements that exist at the time the event was registered      Delegated event handler attached to ancestor element   Delegated event handlers are designed for situations where the elements may not yet exist  dynamically loaded or created  and is very useful  They delegate responsibility to an ancestor element  hence the term        myform   on  change     checkbox   function          if    this  is   checked              console log   this  val       is now checked          else           console log   this  val       is now unchecked                JSFiddle  http   jsfiddle net TrueBlueAussie u8bcggfL 4   Notes    This works by listening for events  in this case change  to bubble up to a non-changing ancestor element  in this case  myform    It then applies the jQuery selector    checkbox  in this case  to only the elements in the bubble chain  It then applies the event handler function to only those matching elements that caused the event  Use document as the default to connect the delegated event handler  if nothing else is closer convenient   Do not use body to attach delegated events as it has a bug  to do with styling  that can stop it getting mouse events    The upshot of delegated handlers is that the matching elements only need to exist at event time and not when the event handler was registered  This allows for dynamically added content to generate the events   Q  Is it slower   A   So long as the events are at user-interaction speeds  you do not need to worry about the negligible difference in speed between a delegated event handler and a directly connected handler  The benefits of delegation far outweigh any minor downside  Delegated event handlers are actually faster to register as they typically connect to a single matching element     Why doesn t prop  checked   true  fire the change event   This is actually by design  If it did fire the event you would easily get into a situation of endless updates  Instead  after changing the checked property  send a change event to the same element using trigger  not triggerHandler    e g  without trigger no event occurs   cb prop  checked     cb prop  checked       JSFiddle  http   jsfiddle net TrueBlueAussie u8bcggfL 5   e g  with trigger the normal change event is caught   cb prop  checked     cb prop  checked    trigger  change      JSFiddle  http   jsfiddle net TrueBlueAussie u8bcggfL 6   Notes    Do not use triggerHandler as was suggested by one user  as it will not bubble events to a delegated event handler    JSFiddle  http   jsfiddle net TrueBlueAussie u8bcggfL 8   although it will work for an event handler directly connected to the element   JSFiddle  http   jsfiddle net TrueBlueAussie u8bcggfL 9      Events triggered with  triggerHandler   do not bubble up the DOM hierarchy  if they are not handled by the target element directly  they do nothing    Reference  http   api jquery com triggerhandler   If anyone has additional features they feel are not covered by this  please do suggest additions

User · Answer

Using the new  on  method in jQuery  1 7   http   api jquery com on           myform   on  change    input type checkbox    function e            console log this name     this value     this checked               the event handler will live on will capture if the checkbox was changed by keyboard  not just click

User · Answer

Use the change event       myform  checkbox   change function            this represents the checkbox that was checked        do something with it

User · Answer

myform  checkbox   change function            this will contain a reference to the checkbox        if  this checked               the checkbox is now checked        else              the checkbox is now no longer checked

User · Answer

I have try the code from first answer  it not working but I have play around and this work for me      vip   change function        if    this  is   checked              alert  checked          else           alert  uncheck

User · Answer

Acknowledging the fact that the asker specifically requested jQuery and that the answer selected is correct  it should be noted that this problem doesn t actually need jQuery per say   If one desires to solve this problem without it  one can simply set the onClick attribute of the checkboxes that he or she wants to add additional functionality to  like so   HTML    lt form id  myform  gt     lt input type  checkbox  name  check1  value  check1  onClick  cbChanged this    gt     lt input type  checkbox  name  check2  value  check2  onClick  cbChanged this    gt   lt  form gt    javascript   function cbChanged checkboxElem      if  checkboxElem checked           Do something special     else          Do something else         Fiddle  http   jsfiddle net Y9f66 1

[jquery] jQuery checkbox event handling

Examples related to jquery

Examples related to html

Examples related to checkbox