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" />

（假设完整的HTML和脚本在所有准备就绪时触发）

单击以选择单选选项时，更改事件似乎会触发，但在使用键盘更改选择时则不会触发。关于这个可以做些什么吗？

编辑 - 如果我使用bind或live没有任何区别 - 这只是一个错误吗？

澄清一下，即使失去焦点，事件也不会触发。

编辑2 - 没人知道原因吗？

编辑3 - 正如DonaldIsFreak指出这似乎是一个铬问题

Answer 1

这是一个可靠的解决方案http://evilstreak.co.uk/blog/fixing-change-events-on-radios

使用它，这就是你用你的例子实现它的方法：以下是demo以下代码的http://www.jsfiddle.net/uDkdJ/1/ 我在FF3.6，IE8，Safari5，Chrome7和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(); }
  });
});

Answer 2

在jquery 1.4.2中，@ selector不起作用。查看此示例以查看它是否对您有用，请按“单击”更改“更改”事件。

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

Answer 3

不幸的是，单选按钮在使用键盘更改时不会触发更改事件，直到您失去焦点。

如果要解决此问题，可以始终设置监视状态的计时器，并在事件发生更改时调度。像（伪代码）的东西：

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();
}

Answer 4

我没有太多运气让单选按钮在我的jsfiddle中用箭头键改变它的状态，所以这是一个盲目的回答：

使用.keypress()关于在失去焦点之前不更改的相同规则适用于选择框，并且我已成功使用.keypress()

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

Answer 5

$("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(); }
});

此方法的问题在于，当用户按下某个键时，该事件将触发一次，而当它失去焦点时，该事件将再次触发。我不确定do_this_stuff()和do_other_stuff()做了什么，但是如果它们不止一次触发是一个问题，你可以用var修复它来检查以前的值是什么，所以你知道它是不是实际上改变了：

$("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();
});

使用键盘选择单选按钮时，更改事件未触发

5 个答案: