perform an action on checkbox checked or unchecked event on html form

Question

I have a checkbox on a form which is unchecked by default as usual  now I want to perform two separated actions on checked and unchecked state of this checkbox   this is my checkbox    lt form gt      syn lt input type  checkbox  name  checkfield  id  g01-01   onchange  doalert this id    gt   lt  form gt    and this is my script   function doalert id     if this checked         alert  checked       else       alert  unchecked            it just alerts uncheched   what is the best way to do that

User · Accepted Answer

We can do this using JavaScript  no need of jQuery  Just pass the changed element and let JavaScript handle it   HTML   lt form id  myform  gt      syn lt input type  checkbox  name  checkfield  id  g01-01   onchange  doalert this    gt   lt  form gt    JS  function doalert checkboxElem      if  checkboxElem checked        alert   hi        else       alert   bye            Demo Here

User · Answer

The currently accepted answer doesn t always work    To read about the problem and circumstances  read this  Defined function is  quot Not defined quot     So  you have 3 options   1  it has above-mentioned drawback    lt input type  checkbox  onchange  doAlert this   gt    lt script gt  function doAlert checkboxElem        if  checkboxElem checked            alert   hi          else           alert   bye             lt  script gt    2 and 3   lt input type  checkbox  id  foo  gt    lt script gt  function doAlert         var input   document querySelector   foo            input addEventListener  change   function                    or        input onchange   function                input addEventListener  change   function             if  input checked                alert   hi              else               alert   bye                         doAlert     lt  script gt

User · Answer

lt form gt      syn lt input type  checkbox  name  checkfield  id  g01-01    gt   lt  form gt    js       g01-01   on  change  function        var  val     this  is   checked      checked     unchecked       alert  val

User · Answer

Given you use JQuery  you can do something like below    HTML   lt form id  myform  gt      syn lt input type  checkbox  name  checkfield  id  g01-01   onclick  doalert     gt   lt  form gt    JS  function doalert       if      g01-01   is   checked          alert   hi        else       alert   bye

User · Answer

If you debug your code using developer tools  you will notice that this refers to the window object and not the input control  Consider using the passed in id to retrieve the input and check for checked value    function doalert id     if document getElementById id  checked        alert  checked       else      alert  unchecked

User · Answer

The problem is how you ve attached the listener    lt input type  checkbox       onchange  doalert this id   gt    Inline listeners are effectively wrapped in a function which is called with the element as this  That function then calls the doalert function  but doesn t set its this so it will default to the global object  window in a browser    Since the window object doesn t have a checked property  this checked always resolves to false   If you want this within doalert to be the element  attach the listener using addEventListener   window onload   function       var input   document querySelector   g01-01      if  input           input addEventListener  change   doalert  false           Or if you wish to use an inline listener    lt input type  checkbox       onchange  doalert call this  this id   gt

User · Answer

Have you tried using the JQuery change event       g01-01   change function         if this checked              Do stuff             Then you can also remove onchange  doalert this id   from your checkbox     Edit   I don t know if you are using JQuery  but if you re not yet using it  you will need to put the following script in your page so you can use it    lt script src  https   ajax googleapis com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt

[javascript] perform an action on checkbox checked or unchecked event on html form

Examples related to javascript

Examples related to html

Examples related to checkbox