Question

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p> Is the time stamp bold and italsized</p>
<label>Yes</label>
<input type="radio" id='rb1' name="first" value="Message 1" class='q1'>
<label>No</label>
<input type="radio" id='rb2' name="second" value="Message 2" class='q1'> 
<br>
<div class="answer">
</div>
<script>
$('.q1').change(function() {
    $('.answer').html($(this).val());
});

$('input').keydown(function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  switch (code) {
    case 89: // y
      $('#rb1').prop('checked', true);
      break;
    case 78: // n
      $('#rb2').prop('checked', true);
      break;
  }
});
</script>
</body>
</html>

此代码完全符合我的要求但是，使用快捷方式时文本不会动态更改。按下“y”或“n”时会检查正确的按钮，但文本不会更改。它们只有在用鼠标选中时才会改变。我在这里错了

Answer 1

更改道具后调用change()功能。

$('#rb1').prop('checked', true).change();

编辑：此外，编辑单选按钮的名称并给出相同的值。

<input type="radio" id='rb1' name="first" value="Message 1" class='q1'>

<input type="radio" id='rb2' name="first" value="Message 2" class='q1'>

Answer 2

您有3个错误。首先，您必须将keydown检查事件从输入更改为焦点内的任何元素。或者您必须将焦点设置为要触发的事件的复选框。在下面的示例中，我将其更改为正文。然后，正如@enucar所说，你必须调用.change（）来触发更改事件并更改无线电的名称，以便让一个人取消选择另一个。如果他们没有相同的名称，您必须以编程方式取消选择其他名称。这是一个有效的例子：

<p> Is the time stamp bold and italsized</p>
<label>Yes</label>
<input type="radio" id='rb1' name="q1group" value="Message 1" class='q1'>
<label>No</label>
<input type="radio" id='rb2' name="q1group" value="Message 2" class='q1'> 
<br>
<div class="answer">
</div>
<script>
$('.q1').change(function() {
    $('.answer').html($(this).val());
});

$('body').keydown(function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
    switch (code) {
    case 89: // y
      $('#rb1').prop('checked', true).change();
      break;
    case 78: // n
      $('#rb2').prop('checked', true).change();
      break;
  }
});
</script>

在JSFiddle：https://jsfiddle.net/84ozw2as/6/

根据单选按钮选择动态显示/隐藏文本

2 个答案: