代码之家 › 专栏 › 技术社区 › Greg

用键盘选择单选按钮时不触发更改事件

jquery

Greg · 技术社区 · 15 年前

<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指出的,这似乎是一个铬的问题

5 回复 | 直到 15 年前

John Hartsock 15 年前

这是一个可靠的解决方案 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(); }
  });
});

Community Mohan Dere 8 年前

在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

Scott S 15 年前

如果你想解决这个问题,你可以设置一个定时器来监控状态,并在事件发生变化时发送事件。类似(伪代码):

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

SooDesuNe 15 年前

我在用jsfiddle中的箭头键更改单选按钮的状态时运气不太好,所以这里有一个盲目的答案:

使用 .keypress() 同样的规则是,在调焦前不要改变,我已经成功地使用了 .keypress() 那里

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

Nathan MacInnes 15 年前

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