Change event not firing when radio button is selected with keyboard

Question

<script>
$("input[name='my_radio_button']").change(function(){
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
                do_this_stuff(); 
    } else { do_other_stuff(); }
});
</script>

<input type="radio" name="my_radio_button1" id="radio1" value="ONE" checked />
<input type="radio" name="my_radio_button2" id="radio2" value="TWO" />

(assume complete HTML and the script firing when all is ready)

The change event seems to fire when clicking to select a radio option, but not when the selection is changed with keyboard. Can anything be done about this?

edit - makes no difference if I use bind or live -- is this just a bug?

To clarify, the event does not fire even after focus is lost.

edit 2 - nobody knows the reason for this?

edit 3 - as DonaldIsFreak pointed out this seems to be a chrome problem

What you have, in the order it's in, shouldn't be working at all, are you sure you're getting any behavior, even with a click? — Nick Craver, Oct 27 '10 at 00:06
When i run this script on firefox browser is success,but on Chrome browser not change. i guess this problem about jquery event handler. What version with you use jquery? — dz1984, Nov 01 '10 at 00:26

score 24 · Accepted Answer · answered Nov 12 '10 at 01:27

Here is a reliable fix http://evilstreak.co.uk/blog/fixing-change-events-on-radios

And using it this is how you would implement it with your example: And here is a demo of the code below http://www.jsfiddle.net/uDkdJ/1/ I tested this demo in FF3.6, IE8, Safari5, Chrome7, and Opera10.65

$.fn.fix_radios = function() {
  function focus() {
    if ( !this.checked ) return;
    if ( !this.was_checked ) {
      $( this ).change();
    }
  }

  function change( e ) {
    if ( this.was_checked ) {
      e.stopImmediatePropagation();
      return;
    }
    $( "input[name=" + this.name + "]" ).each( function() {
      this.was_checked = this.checked;
    } );
  }
  return this.focus( focus ).change( change );
}

$(function() {
  $( "input[type=radio]" ).fix_radios();
  $("input[name='my_radio_button']").change(function(){
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
      do_this_stuff(); 
    } else { do_other_stuff(); }
  });
});

I haven't had a chance to test this yet, but I trust that it works. I will make use of this. Thank you! — Greg, Nov 18 '10 at 06:33
not working when you click div around radio the browser will auto check the radio — Do Hoa Vinh, Sep 09 '17 at 14:20
@DoHoaVinh seems to work fine. have a look http://jsfiddle.net/uDkdJ/302/ — John Hartsock, Sep 21 '17 at 21:25

score 7 · Answer 2 · edited May 23 '17 at 12:00

In jquery 1.4.2 @ selector does not work. Look at this example to see if it is useful to you, change the "change" event per "click".

html

<input type="radio" name="rdio" value="a" checked="checked" />
<input type="radio" name="rdio" value="b" />
<input type="radio" name="rdio" value="c" />

<br />

<div id="test"></div>

javascript:

$("input[name='rdio']").click(function(){
    if ($("input[name='rdio']:checked").val() == 'a')
        $("#test").append("<div>a</div>");
    else if ($("input[name='rdio']:checked").val() == 'b')
        $("#test").append("<div>b</div>");
    else
        $("#test").append("<div>c</div>");
});

example
ref 1
ref 2

score 0 · Answer 3 · answered Oct 27 '10 at 00:48

Unfortunately, radio buttons don't fire change events when changed with the keyboard, until you lose focus.

If you want to work around this problem, you can always set up a timer that monitors the state, and dispatches an event when it changes. Something like (pseudocode):

var monitorRadio = function(radio)
{
   var state = $("input[@name='']:checked").val();
   $(radio).data("state", state);
   var func = function()
   {
     var state = $("input[@name='']:checked").val();
     if (state != $(radio).data("state"))
     {
       $(radio).data("state", state);
       // dispatch the change event
       $(radio).change();
     }
     setTimeout(100, func());
   };   


   func();
}

Thanks for the workaround, but my code is not working even *after* the radio buttons lose focus. I'll tab over to another field and jquery just ignores the change entirely. The select box, for example, works properly when changed and focus is lost. — Greg, Oct 27 '10 at 00:49

score 0 · Answer 4 · answered Oct 27 '10 at 00:56

I'm not having much luck getting the radio button to change it's state with the arrow keys in my jsfiddle, so here's a blind answer:

Use .keypress() The same rule about not changing until loosing focus applies to select boxes, and I've successfully used .keypress() there

http://api.jquery.com/keypress/

Nathan MacInnes · Answer 5 · 2010-11-16T11:38:33.893

$("input[name='my_radio_button']").bind('change keypress', function(){
  if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
    do_this_stuff(); 
  } else { do_other_stuff(); }
});

The problem with this method is that the event will fire once when the user presses a key, and again when it loses focus. I'm not sure what do_this_stuff() and do_other_stuff() do, but if them firing more than once is a problem, you could fix this with a var to check what the previous value was, so you know if it's actually changed:

$("input[name='my_radio_button']").bind('change keypress', function(){
  if ($(this).value() != prevValue) {
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
      do_this_stuff(); 
    } else { do_other_stuff(); }
  }
  prevValue = $(this).value();
});

Change event not firing when radio button is selected with keyboard

5 Answers5

Linked