Javascript jQuery热键只工作一次

我有4个无线电输入

我给他们分配了热键。 （热键为1、2、3和4）

这是我的html代码：

<label>
 <input type="radio" value="2" id="1" name="1">[c2]
</label>
<label>
 <input type="radio" value="4" id="2" name="1">[c4]
</label>
<label>
 <input type="radio" value="1" id="3" name="1">[c1]
</label>
<label>
 <input type="radio" value="3" id="4" name="1">[c3]
</label>

$(document).keypress(function(e) {

  if(e.charCode == 49) {
    console.log("1");
    $('input:radio[id=1]').attr('checked',true);
  }

  if(e.charCode == 50) {
    console.log("2");
    $('input:radio[id=2]').attr('checked',true);
  }

  if(e.charCode == 51) {
    console.log("3");
    $('input:radio[id=3]').attr('checked',true);
  }

  if(e.charCode == 52) {
    console.log("4");
    $('input:radio[id=4]').attr('checked',true);
  }                  
});

您还可以看到，我将

console.log

事件放到脚本中只是为了观察

对我来说奇怪的是，每个单选按钮只能通过热键选择一次重拨按钮

*

如果我按1，它会选择正确的复选框并给出正确的控制台日志

然后我按2键，效果也一样

但如果我再次按1，它会显示控制台日志，但热键不起作用

这里是jsfiddle：

如何使热键在一个会话中多次工作？

您可能必须使用

$("input:radio[id=2]").prop("checked", true)

$（文档）。按键（功能（e）{
如果（e.charCode==49）{
控制台日志（“1”）；
$（'input:radio[id=1]'）。prop（'checked'，true）；
}
如果（e.charCode==50）{
控制台日志（“2”）；
$（'input:radio[id=2]'）.prop（'checked'，true）；
}
如果（e.charCode==51）{
控制台日志（“3”）；
$（'input:radio[id=3]'）。prop（'checked'，true）；
}
如果（e.charCode==52）{
控制台日志（“4”）；
$（'input:radio[id=4]'）.prop（'checked'，true）；
}
});

[c2]
[c4]
[c1]
[c3]
您可能必须使用

$("input:radio[id=2]").prop("checked", true)


$（文档）。按键（功能（e）{
如果（e.charCode==49）{
控制台日志（“1”）；
$（'input:radio[id=1]'）。prop（'checked'，true）；
}
如果（e.charCode==50）{
控制台日志（“2”）；
$（'input:radio[id=2]'）.prop（'checked'，true）；
}
如果（e.charCode==51）{
控制台日志（“3”）；
$（'input:radio[id=3]'）。prop（'checked'，true）；
}
如果（e.charCode==52）{
控制台日志（“4”）；
$（'input:radio[id=4]'）.prop（'checked'，true）；
}
});

[c2]
[c4]
[c1]
[c3]
我不知道原因，但这段代码有效：

$(document).keypress(function(e) {

  if(e.charCode == 49) {
    console.log("1");
    //$('input:radio[id=1]').attr('checked',true);
    $('input:radio[id=1]')[0].checked= "checked"
  }

  if(e.charCode == 50) {
    console.log("2");
    //$('input:radio[id=2]').attr('checked',true);
    $('input:radio[id=2]')[0].checked= "checked"
  }

  if(e.charCode == 51) {
    console.log("3");
    //$('input:radio[id=3]').attr('checked',true);
    $('input:radio[id=3]')[0].checked= "checked"
  }

  if(e.charCode == 52) {
    console.log("4");
    //$('input:radio[id=4]').attr('checked',true);
    $('input:radio[id=4]')[0].checked= "checked"
  }                  
});

我不知道原因，但这段代码有效：

$(document).keypress(function(e) {

  if(e.charCode == 49) {
    console.log("1");
    //$('input:radio[id=1]').attr('checked',true);
    $('input:radio[id=1]')[0].checked= "checked"
  }

  if(e.charCode == 50) {
    console.log("2");
    //$('input:radio[id=2]').attr('checked',true);
    $('input:radio[id=2]')[0].checked= "checked"
  }

  if(e.charCode == 51) {
    console.log("3");
    //$('input:radio[id=3]').attr('checked',true);
    $('input:radio[id=3]')[0].checked= "checked"
  }

  if(e.charCode == 52) {
    console.log("4");
    //$('input:radio[id=4]').attr('checked',true);
    $('input:radio[id=4]')[0].checked= "checked"
  }                  
});

另外看看这个：有解释。你应该扩展这个答案，并解释为什么它比OP的方法有效：）另外看看这个：有解释。你应该扩展这个答案，并解释为什么它比OP的方法有效：）