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

【问题标题】：Change event not firing when radio button is selected with keyboard使用键盘选择单选按钮时未触发更改事件
【发布时间】：2010-11-17 20:34:47
【问题描述】：

<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 指出的，这似乎是 chrome 问题

【问题讨论】：

你拥有的东西，按照它的顺序，根本不应该工作，你确定你有任何行为，即使点击一下？
@Nick Craver -- 这样更好吗？
当我在 Firefox 浏览器上运行这个脚本是成功的，但在 Chrome 浏览器上没有改变。我猜这个关于 jquery 事件处理程序的问题。你用什么版本的jquery？

标签： jquery

【解决方案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中测试了这个demo

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

【讨论】：

我还没有机会对此进行测试，但我相信它可以工作。我会利用这个。谢谢！
当你点击收音机周围的div时不起作用，浏览器会自动检查收音机
@DoHoaVinh 似乎工作正常。看看jsfiddle.net/uDkdJ/302

【解决方案2】：

在 jquery 1.4.2 中 @ 选择器不起作用。看看这个例子，看看它是否对你有用，改变每次“点击”的“更改”事件。

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

【讨论】：

【解决方案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();
}

【讨论】：

感谢您的解决方法，但我的代码即使在单选按钮失去焦点后也无法正常工作。我将切换到另一个字段，jquery 完全忽略了更改。例如，选择框在更改和失去焦点时可以正常工作。

【解决方案4】：

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

使用.keypress() 在失去焦点之前不改变的相同规则适用于选择框，我已经成功使用.keypress() 那里

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

【讨论】：

【解决方案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();
});

【讨论】：