jQuery checkbox checked state changed event

Question

I want an event to fire client side when a checkbox is checked   unchecked       checkbox   click function       if    this  is   checked             Do stuff           Basically I want it to happen for every checkbox on the page  Is this method of firing on the click and checking the state ok   I m thinking there must be a cleaner jQuery way  Anyone know a solution

User · Answer

If your intention is to attach event only on checked checkboxes (so it would fire when they are unchecked and checked later again) then this is what you want.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

if your intention is to attach event to all checkboxes (checked and unchecked)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

if you want it to fire only when they are being checked (from unchecked) then @James Allardice answer above.

BTW input[type='checkbox']:checked is CSS selector.

User · Answer

Is very simple  this is the way I use   JQuery     document  on  change     name  nameOfCheckboxes       function         var checkbox     this      Selected or current checkbox         value   checkbox val       Value of checkbox      if  checkbox is   checked                  console log  checked         else               console log  not checked                Regards

User · Answer

Action taking based on an event  on click event         my checkbox   on  click  function           my div   hide       if this checked            my div   show                  Without event taking action based on current state        my div   hide    if     my checkbox   is   checked           my div   show

User · Answer

This is the solution to find is the checkbox is checked or not  Use the  prop   function        c checkbox   on  change   function                          if    this  prop  checked                                 do stuff

User · Answer

perhaps this may be an alternative for you    lt input name  chkproperty  onchange     this  prop  checked       this  val true      this  val false    type  checkbox  value  true    gt

User · Answer

Bind to the change event instead of click  However  you will probably still need to check whether or not the checkbox is checked       checkbox   change function         if this checked              Do stuff             The main benefit of binding to the change event over the click event is that not all clicks on a checkbox will cause it to change state  If you only want to capture events that cause the checkbox to change state  you want the aptly-named change event  Redacted in comments  Also note that I ve used this checked instead of wrapping the element in a jQuery object and using jQuery methods  simply because it s shorter and faster to access the property of the DOM element directly   Edit  see comments   To get all checkboxes you have a couple of options  You can use the  checkbox pseudo-selector       checkbox     Or you could use an attribute equals selector      input type  checkbox

User · Answer

Just another solution       checkbox class   on  change   function       on change of state    if this checked     if changed state is  CHECKED                   do the magic here

User · Answer

For future reference to anyone here having difficulty  if you are adding the checkboxes dynamically  the correct accepted answer above will not work  You ll need to leverage event delegation which allows a parent node to capture bubbled events from a specific descendant and issue a callback         lt parent gt   on   lt event gt      lt child gt    callback     document  on  change     checkbox   function         if this checked             checkbox is checked             Note that it s almost always unnecessary to use document for the parent selector  Instead choose a more specific parent node to prevent propagating the event up too many levels   The example below displays how the events of dynamically added dom nodes do not trigger previously defined listeners    x000D   x000D   postList       post-list    x000D   x000D   postList find  h1   on  click   onH1Clicked   x000D   x000D  function onH1Clicked     x000D    alert   this  text     x000D    x000D   x000D     simulate added content x000D  var title   2  x000D   x000D  function generateRandomArticle title    x000D     postList append   lt article class  post  gt  lt h1 gt Title     title     lt  h1 gt  lt  article gt     x000D    x000D   x000D  setTimeout generateRandomArticle bind null    title   1000   x000D  setTimeout generateRandomArticle bind null    title   5000   x000D  setTimeout generateRandomArticle bind null    title   10000   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt section id  post-list  class  list post-list  gt  x000D     lt article class  post  gt  x000D       lt h1 gt Title 1 lt  h1 gt  x000D     lt  article gt  x000D     lt article class  post  gt  x000D       lt h1 gt Title 2 lt  h1 gt  x000D     lt  article gt  x000D   lt  section gt  x000D   x000D   x000D    While this example displays the usage of event delegation to capture events for a specific node  h1 in this case   and issue a callback for such events    x000D   x000D   postList       post-list    x000D   x000D   postList on  click    h1   onH1Clicked   x000D   x000D  function onH1Clicked     x000D    alert   this  text     x000D    x000D   x000D     simulate added content x000D  var title   2  x000D   x000D  function generateRandomArticle title    x000D     postList append   lt article class  post  gt  lt h1 gt Title     title     lt  h1 gt  lt  article gt     x000D    x000D   x000D  setTimeout generateRandomArticle bind null    title   1000   setTimeout generateRandomArticle bind null    title   5000   setTimeout generateRandomArticle bind null    title   10000   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt section id  post-list  class  list post-list  gt  x000D     lt article class  post  gt  x000D       lt h1 gt Title 1 lt  h1 gt  x000D     lt  article gt  x000D     lt article class  post  gt  x000D       lt h1 gt Title 2 lt  h1 gt  x000D     lt  article gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

Try this  quot html-approach quot  which is acceptable for small JS projects  x000D   x000D  function msg animal is      console log animal  is checked        Do stuff   x000D   lt input type  checkbox  oninput  msg  dog   this     gt Do you have a dog   lt br gt   lt input type  checkbox  oninput  msg  frog  this     gt Do you have a frog  lt br gt      x000D   x000D   x000D

User · Answer

Try this jQuery validation   x000D   x000D    document  ready function     x000D        myform   validate      initialize the plugin x000D      rules    x000D        agree    x000D          required  true x000D          x000D   x000D         x000D      submitHandler  function form    x000D        alert  valid form submitted    x000D        return false  x000D        x000D        x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery-validate 1 17 0 jquery validate js  gt  lt  script gt  x000D   x000D   lt form id  myform  action    method  post  gt  x000D     lt div class  buttons  gt  x000D       lt div class  pull-right  gt  x000D         lt input type  checkbox  name  agree    gt  lt br  gt  x000D         lt label gt I have read and agree to the  lt a href  https   stackexchange com legal terms-of-service  gt Terms of services lt  a gt   lt  label gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt button type  submit  gt Agree lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

document  ready function            document  on  change    input Id  chkproperty     function  e            alert   this  val

[javascript] jQuery checkbox checked state changed event

Examples related to javascript

Examples related to jquery

Examples related to event-handling