jQuery radioButton change not firing during de-selection

Question

About a month ago Mitt   s question went unanswered  Sadly  I   m running into the same situation now   http   api jquery com change  comment-133939395  Here   s the situation  I   m using jQuery to capture the changes in a radio button  When the radio button is selected I enable an edit box  When the radio button is de-selected  I would like the edit box to be disabled   The enabling works  When I choose a different radio button in the group  the change event is not fired  Does anyone know how to fix this    lt input type  radio  id  r1  name  someRadioGroup   gt     lt script type  text javascript  gt          r1   change function              if      r1   attr  checked                      r1edit input   removeAttr  disabled                      else                   r1edit input   attr  disabled   true                      lt  script gt

User · Answer

lt input id  r1  type  radio  class  rg  name  asdf   gt   lt input id  r2  type  radio  class  rg  name  asdf   gt   lt input id  r3  type  radio  class  rg  name  asdf   gt   lt input id  r4  type  radio  class  rg  name  asdf   gt  lt br  gt   lt input type  text  id  r1edit   gt                      jquery part      rg   change function       if      r1   attr  checked                      r1edit input   removeAttr  disabled                      else                   r1edit input   attr  disabled    disabled                                        here is the DEMO

User · Answer

Let s say those radio buttons are inside a div that has the id radioButtons and that the radio buttons have the same name  for example commonName  then       radioButtons   on  change    input name commonName  radio   function  e        console log  You have changed the selected radio button

User · Answer

The change event not firing on deselection is the desired behaviour  You should run a selector over the entire radio group rather than just the single radio button  And your radio group should have the same name  with different values   Consider the following code      input name  job video need      on  change   function          var value      if    this  val       none             value    hide         else           value    show                 video-script-collapse   collapse value         I have same use case as yours i e  to show an input box when a particular radio button is selected  If the event was fired on de-selection as well  I would get 2 events each time

User · Answer

This normally works for me   if      r1   is   checked

User · Answer

My problem was similar and this worked for me      body   on  change     radioClassNameHere   function

User · Answer

With Ajax  for me worked   Html    lt div id  anID  gt    lt form name  nameOfForm  gt               lt p gt  lt b gt Your headline lt  b gt  lt  p gt               lt input type  radio  name  nameOfRadio  value  seed                 lt  php if   interviewStage     seed    echo  checked      gt               onchange  funcInterviewStage    gt  lt label gt Your label lt  label gt  lt br gt    lt  form gt   lt  div gt    Javascript    function funcInterviewStage                      var dis   document nameOfForm nameOfRadio value                     Auswahltafel anzeigen                   if  dis                                document getElementById  anID   innerHTML                             return                      else                          if  window XMLHttpRequest                                 code for IE7   Firefox  Chrome  Opera  Safari                           xmlhttp   new XMLHttpRequest                            else                                code for IE6  IE5                           xmlhttp   new ActiveXObject  Microsoft XMLHTTP                                                  xmlhttp onreadystatechange   function                               if  xmlhttp readyState    4  amp  amp  xmlhttp status    200                                  document getElementById  anID   innerHTML   xmlhttp responseText                                                                            xmlhttp open  GET    includes  name  php id   dis true                         xmlhttp send                                            And php        Get Value  id   mysqli real escape string  db    GET  id           Insert to database  insert   mysqli query  db   UPDATE  TABLE  SET  column      id  WHERE                Show radio buttons again  mysqliAbfrage   mysqli query  db   SELECT  column  FROM  Table  WHERE                            while   row   mysqli fetch object  mysqliAbfrage                                                                   echo                      lt form name  nameOfForm  gt                         lt p gt  lt b gt Your headline lt  b gt  lt  p gt                         lt input type  radio  name  nameOfRadio  value  seed    if   interviewStage     seed    echo  checked     echo  onchange  funcInterviewStage    gt  lt label gt Yourr Label lt  label gt  lt br gt                         lt input type  radio  name  nameOfRadio  value  startup    if   interviewStage     startup    echo  checked     echo  onchange  funcInterviewStage    gt  lt label gt Your label lt  label gt  lt br gt                      lt  form gt

User · Answer

You can bind to all of the radio buttons at once by name      input name someRadioGroup  radio   change         Working example here  http   jsfiddle net Ey4fa

User · Answer

Same problem here  this worked just fine      input name  someRadioGroup     change function             r1edit input   prop  disabled        r1   is   checked

User · Answer

Looks like the change   function is only called when you check a radio button  not when you uncheck it   The solution I used is to bind the change event to every radio button       r1   r2   r3   change function        Or you could give all the radio buttons the same name      input name someRadioGroup  radio   change function        Here s a working jsfiddle example  updated from Chris Porter s comment    Per  Ray s comment  you should avoid using names with   in them  Those names work in jQuery 1 7 2 but not in other versions  jsfiddle example

[javascript] jQuery $("#radioButton").change(...) not firing during de-selection

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to radio-button