OnChange event handler for radio button INPUT type radio doesn t work as one value

Question

I m looking for a generalized solution for this   Consider 2 radio type inputs with the same name  When submitted  the one that is checked determines the value that gets sent with the form    lt input type  radio  name  myRadios  onchange  handleChange1     value  1    gt   lt input type  radio  name  myRadios  onchange  handleChange2     value  2    gt    The change event does not fire when a radio button is de-selected  So if the radio with value  1  is already selected and the user selects the second  handleChange1   does not run  This presents a problem  for me anyway  in that there is no event where I can can catch this de-selection   What I would like is a workaround for the onchange event for the checkbox group value or alternatively an oncheck event that detects not only when a radio is checked but also when it is unchecked   I m sure some of you have run into this problem before  What are some workarounds  or ideally what is the right way to handle this   I just want to catch the change event  access the previously checked radio as well as the newly checked radio   P S  onclick seems like a better  cross-browser  event to indicate when a radio is checked but it still does not solve the un-checked problem   I suppose it makes sense why onchange for a checkbox type does work in a case like this since it changes the value that it submits when you check or un-check it  I wish the radio buttons behaved more like a SELECT element s onchange but what can you do

User · Answer

I would make two changes    lt input type  radio  name  myRadios  onclick  handleClick this    value  1    gt   lt input type  radio  name  myRadios  onclick  handleClick this    value  2    gt     Use the onclick handler instead of onchange - you re changing the  checked state  of the radio input  not the value  so there s not a change event happening  Use a single function  and pass this as a parameter  that will make it easy to check which value is currently selected    ETA  Along with your handleClick   function  you can track the original   old value of the radio in a page-scoped variable  That is   var currentValue   0  function handleClick myRadio        alert  Old value      currentValue       alert  New value      myRadio value       currentValue   myRadio value       x000D   x000D  var currentValue   0  x000D  function handleClick myRadio    x000D      alert  Old value      currentValue   x000D      alert  New value      myRadio value   x000D      currentValue   myRadio value  x000D    x000D   lt input type  radio  name  myRadios  onclick  handleClick this    value  1    gt  x000D   lt input type  radio  name  myRadios  onclick  handleClick this    value  2    gt  x000D   x000D   x000D

User · Answer

Yes there is no change event for currently selected radio button  But problem is when each radio button is taken as a separate element  Instead a radio group should be considered a single element like select  So change event is triggered for that group  If it is a select element we never worry about each option in it  but take only the selected option  We store the current value in a variable which will become the previous value  when a new option is selected  Similarly you have to use a separate variable for storing value of checked radio button   If you want to identify the previous radio button  you have to loop on mousedown event   var radios   document getElementsByName  myRadios    var val  for var i   0  i  lt  radios length  i         if radios i  checked           val   radios i  value            see this   http   jsfiddle net diode tywx6 2

User · Answer

This is just off the top of my head  but you could do an onClick event for each radio button  give them all different IDs  and then make a for loop in the event to go through each radio button in the group and find which is was checked by looking at the  checked  attribute   The id of the checked one would be stored as a variable  but you might want to use a temp variable first to make sure that the value of that variable changed  since the click event would fire whether or not a new radio button was checked

User · Answer

For some reason  the best answer does not works for me  I improved best answer by use     var overlayType radio   document querySelectorAll  input type radio  name  quot radio overlaytype quot       Original best answer use        var rad   document myForm myRadios   The others keep the same  finally it works for me  var overlayType radio   document querySelectorAll  input type radio  name  quot radio overlaytype quot                                    console log  overlayType radio   overlayType radio                                 var prev   null                                for  var i   0  i  lt  overlayType radio length  i                                        overlayType radio i  addEventListener  change   function                                            prev    console log  radio prev value  prev value   null                                        if  this     prev                                              prev   this                                                                                console log  radio now value    this value                                                                         html is   lt div id  overlay-div  gt                           lt fieldset gt                                   lt legend gt  Overlay Type  lt  legend gt                                                                    lt p gt                                       lt label gt                                         lt input class  with-gap  id  overlayType image  value  overlayType image  name  radio overlaytype  type  radio  checked  gt                                         lt span gt Image lt  span gt                                        lt  label gt                                   lt  p gt                                    lt p gt                                     lt label gt                                       lt input class  with-gap  id  overlayType tiled image  value  overlayType tiled image  name  radio overlaytype  type  radio  disabled  gt                                       lt span gt  Tiled Image lt  span gt                                      lt  p gt                                    lt p gt                                     lt label gt                                       lt input class  with-gap  id  overlayType coordinated tile  value  overlayType coordinated tile  name  radio overlaytype  type  radio   disabled  gt                                       lt span gt  Coordinated Tile lt  span gt                                     lt  p gt                                    lt p gt                                     lt label gt                                       lt input class  with-gap  id  overlayType none  value  overlayType none  name  radio overlaytype  type  radio   gt                                       lt span gt  None  lt  span gt                                                 lt  p gt                                                                 lt  fieldset gt                          lt  div gt    x000D   x000D   var overlayType radio   document querySelectorAll  input type radio  name  radio overlaytype                                        console log  overlayType radio   overlayType radio                                     var prev   null                                    for  var i   0  i  lt  overlayType radio length  i                                            overlayType radio i  addEventListener  change   function                                                prev    console log  radio prev value  prev value   null                                            if  this     prev                                                  prev   this                                                                                        console log  radio now value    this value                                                                                x000D   lt div id  overlay-div  gt                               lt fieldset gt                                       lt legend gt  Overlay Type  lt  legend gt                                                                            lt p gt                                           lt label gt                                             lt input class  with-gap  id  overlayType image  value  overlayType image  name  radio overlaytype  type  radio  checked  gt                                             lt span gt Image lt  span gt                                            lt  label gt                                       lt  p gt                                        lt p gt                                         lt label gt                                           lt input class  with-gap  id  overlayType tiled image  value  overlayType tiled image  name  radio overlaytype  type  radio    gt                                           lt span gt  Tiled Image lt  span gt                                          lt  p gt                                        lt p gt                                         lt label gt                                           lt input class  with-gap  id  overlayType coordinated tile  value  overlayType coordinated tile  name  radio overlaytype  type  radio     gt                                           lt span gt  Coordinated Tile lt  span gt                                         lt  p gt                                        lt p gt                                         lt label gt                                           lt input class  with-gap  id  overlayType none  value  overlayType none  name  radio overlaytype  type  radio   gt                                           lt span gt  None  lt  span gt                                                     lt  p gt                                                                         lt  fieldset gt                              lt  div gt  x000D   x000D   x000D   jsfiddle click here https   jsfiddle net hoogw jetmkn02 1

User · Answer

What about using the change event of Jquery     function            input radio name  myRadios     change function             if    this  val       1                 alert  You selected the first option and deselected the second one              else               alert  You selected the second option and deselected the first one                            jsfiddle  http   jsfiddle net f8233x20

User · Answer

lt input type  radio  name  brd  onclick  javascript brd     value  IN  gt      lt input type  radio  name  brd  onclick  javascript brd     value  EX  gt     lt script type  text javascript  gt    function brd    alert     name  brd   checked   val       lt  script gt

User · Answer

You can add the following JS script   lt script gt      function myfunction event            alert  Checked radio with ID       event target id             document querySelectorAll  input name  gun     forEach  input    gt            input addEventListener  change   myfunction            lt  script gt

User · Answer

As you can see from this example  http   jsfiddle net UTwGS   HTML     lt label gt  lt input type  radio  value  1  name  my-radio  gt Radio One lt  label gt   lt label gt  lt input type  radio  value  2  name  my-radio  gt Radio One lt  label gt    jQuery         input type  radio     on  click change   function e        console log e type         both the click and change events are fired when selecting a radio button option  at least in some browsers    I should also point out that in my example the click event is still fired when you use tab and the keyboard to select an option   So  my point is that even though the change event is fired is some browsers  the click event should supply the coverage you need

User · Answer

I don t think there is any way other then storing the previous state  Here is the solution with jQuery   lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt    lt script type  text javascript  gt      var lastSelected        function                if you have any radio selected by default         lastSelected       name  myRadios   checked   val                  document  on  click     name  myRadios     function              if  lastSelected      this  val    amp  amp  typeof lastSelected     undefined                 alert  radio box with value         name  myRadios   value      lastSelected         val       was deselected                      lastSelected     this  val             lt  script gt    lt input type  radio  name  myRadios  value  1    gt   lt input type  radio  name  myRadios  value  2    gt   lt input type  radio  name  myRadios  value  3    gt   lt input type  radio  name  myRadios  value  4    gt   lt input type  radio  name  myRadios  value  5    gt    After thinking about it a bit more  I decided to get rid of the variable and add remove class  Here is what I got  http   jsfiddle net BeQh3 2

User · Answer

Easiest and power full way read only radio inputs using getAttribute  x000D   x000D  document addEventListener  input   e   gt    if e target getAttribute  name     myRadios   console log e target value     x000D   lt input type  radio  name  myRadios  value  1    gt  1  lt input type  radio  name  myRadios  value  2    gt  2 x000D   x000D   x000D

User · Answer

this works for me   lt input ID  TIPO INST-0  Name  TIPO INST  Type  Radio  value  UNAM  onchange  convenio unam     gt UNAM   lt script type  text javascript  gt              function convenio unam                    if this document getElementById  TIPO INST-0   checked                           convenio unam   hide                     else                          convenio unam   show                                                                     lt  script gt

User · Answer

If you want to avoid inline script  you can simply listen for a click event on the radio  This can be achieved with plain Javascript by listening to a click event on   for  var radioCounter   0   radioCounter  lt  document getElementsByName  myRadios   length  radioCounter            document getElementsByName  myRadios   radioCounter  onclick   function                VALUE OF THE CLICKED RADIO ELEMENT         console log  this     this value

User · Answer

lt script gt      function radioClick radio           alert          lt  script gt    lt label gt Cash on delivery lt  label gt   lt input type  quot radio quot  onclick  quot radioClick  A   quot  name  quot payment method quot  class  quot form-group quot  gt    lt br gt    lt label gt Debit Credit card  GPay  Paytm etc   lt  label gt   lt input type  quot radio quot  onclick  quot radioClick  B   quot  name  quot payment method quot  class  quot form-group quot  gt

User · Answer

I realize this is an old issue  but this snippet of code works for me   Perhaps someone in the future will find it useful    lt h2 gt Testing radio functionality lt  h2 gt   lt script type  text javascript  gt var radioArray  null   lt  script gt   lt input name  juju  value  button1  type  radio  onclick  radioChange  juju   button1  radioArray      gt Button 1  lt input name  juju  value  button2  type  radio  onclick  radioChange  juju   button2  radioArray      gt Button 2  lt input name  juju  value  button3  type  radio  onclick  radioChange  juju   button3  radioArray      gt Button 3  lt br   gt    lt script type  text javascript  gt  function radioChange radioSet radioButton radioArray          if radioArray instanceof Array   alert  Array Passed       var oldButton radioArray 0     if radioArray 0     null            alert  Old button was not defined        radioArray 0  radioButton          else           alert  Old button was set to     oldButton       radioArray 0  radioButton          alert  New button is set to     radioArray 0         lt  script gt

User · Answer

As you can see here  http   www w3schools com jsref event onchange asp The onchange attribute is not supported for radio buttons   The first SO question linked by you gives you the answer  Use the onclick event instead and check the radio button state inside of the function it triggers

User · Answer

x000D   x000D  var rad   document myForm myRadios  x000D  var prev   null  x000D  for  var i   0  i  lt  rad length  i      x000D      rad i  addEventListener  change   function     x000D           prev    console log prev value   null  x000D          if  this     prev    x000D              prev   this  x000D            x000D          console log this value  x000D          x000D    x000D   lt form name  myForm  gt  x000D     lt input type  radio  name  myRadios   value  1    gt  x000D     lt input type  radio  name  myRadios   value  2    gt  x000D   lt  form gt  x000D   x000D   x000D    Here s a JSFiddle demo  https   jsfiddle net crp6em1z

User · Answer

Store the previous checked radio in a variable  http   jsfiddle net dsbonev C5S4B     HTML   lt input type  radio  name  myRadios  value  1    gt  1  lt input type  radio  name  myRadios  value  2    gt  2  lt input type  radio  name  myRadios  value  3    gt  3  lt input type  radio  name  myRadios  value  4    gt  4  lt input type  radio  name  myRadios  value  5    gt  5   JS  var changeHandler    function initChangeHandler         var previousCheckedRadio   null       var result   function  event            var currentCheckedRadio   event target          var name   currentCheckedRadio name           if  name      myRadios   return             using radio elements previousCheckedRadio and currentCheckedRadio            storing radio element for using in future  change  event handler         previousCheckedRadio   currentCheckedRadio              return result         document addEventListener  change   changeHandler  false     JS EXAMPLE CODE  var changeHandler    function initChangeHandler         var previousCheckedRadio   null       function logInfo info            if   console     console log  return           console log info              function logPrevious element            if   element  return           var message   element value     was unchecked            logInfo message              function logCurrent element            if   element  return           var message   element value     is checked            logInfo message              var result   function  event            var currentCheckedRadio   event target          var name   currentCheckedRadio name           if  name      myRadios   return           logPrevious previousCheckedRadio           logCurrent currentCheckedRadio            previousCheckedRadio   currentCheckedRadio              return result         document addEventListener  change   changeHandler  false

User · Answer

This is the easiest and most efficient function to use just add as many buttons as you want to the checked   false and make the onclick event  of each radio buttoncall this function  Designate a unique number to each radio button  function AdjustRadios which         if which  1           document getElementById  rdpPrivate   checked false      else if which  2           document getElementById  rdbPublic   checked false

[javascript] OnChange event handler for radio button (INPUT type="radio") doesn't work as one value

Examples related to javascript

Examples related to html

Examples related to cross-browser