Getting value of HTML Checkbox from onclick onchange events

Question

lt input type  checkbox  onclick  onClickHandler    onchange  onChangeHandler      gt    From within onClickHandler and or onChangeHandler  how can I determine what is the new state of the checkbox

User · Answer

For React js  you can do this with more readable code  Hope it helps   handleCheckboxChange e      console log  value of checkbox      e target checked     render       return  lt input type  checkbox  onChange  this handleCheckboxChange bind this     gt

User · Answer

Use this   lt input type  checkbox  onclick  onClickHandler    id  box    gt    lt script gt  function onClickHandler        var chk document getElementById  box   value         use this value     lt  script gt

User · Answer

The short answer   Use the click event  which won t fire until after the value has been updated  and fires when you want it to    lt label gt  lt input type  checkbox  onclick  handleClick this    gt Checkbox lt  label gt   function handleClick cb      display  Clicked  new value       cb checked       Live example   Source  The longer answer   The change event handler isn t called until the checked state has been updated  live example   source   but because  as Tim B  the points out in the comments  IE doesn t fire the change event until the checkbox loses focus  you don t get the notification proactively  Worse  with IE if you click a label for the checkbox  rather than the checkbox itself  to update it  you can get the impression that you re getting the old value  try it with IE here by clicking the label  live example   source   This is because if the checkbox has focus  clicking the label takes the focus away from it  firing the change event with the old value  and then the click happens setting the new value and setting focus back on the checkbox  Very confusing   But you can avoid all of that unpleasantness if you use click instead   I ve used DOM0 handlers  onxyz attributes  because that s what you asked about  but for the record  I would generally recommend hooking up handlers in code  DOM2 s addEventListener  or attachEvent in older versions of IE  rather than using onxyz attributes  That lets you attach multiple handlers to the same element and lets you avoid making all of your handlers global functions     An earlier version of this answer used this code for handleClick   function handleClick cb      setTimeout function         display  Clicked  new value       cb checked        0       The goal seemed to be to allow the click to complete before looking at the value  As far as I m aware  there s no reason to do that  and I have no idea why I did  The value is changed before the click handler is called  In fact  the spec is quite clear about that  The version without setTimeout works perfectly well in every browser I ve tried  even IE6   I can only assume I was thinking about some other platform where the change isn t done until after the event  In any case  no reason to do that with HTML checkboxes

[javascript] Getting value of HTML Checkbox from onclick/onchange events

Examples related to javascript

Examples related to html

Examples related to events

Examples related to dom

Examples related to checkbox