Javascript 基于单选按钮选择动态显示/隐藏文本_Javascript_Jquery

Javascript 基于单选按钮选择动态显示/隐藏文本

javascript jquery

Javascript 基于单选按钮选择动态显示/隐藏文本,javascript,jquery,Javascript,Jquery,这段代码完全符合我的要求，但是，当使用快捷方式时，文本不会动态更改。当按下y或n时，会检查正确的按钮，但文本不会更改。只有当用鼠标选择时，它们才会改变。我在这里哪里出错了您有3个错误。首先，您需要将keydown检查事件从输入更改为焦点内的任何元素。或者，您必须将焦点设置在要触发事件的复选框上。在下面的示例中，我将其更改为body。然后，正如@enucar所说，您必须调用。更改为fire change event并更改收音机的名称，以便其中一个取消选择另一个。如果它们没有相同的名称，则必须以编

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

您有3个错误。首先，您需要将keydown检查事件从输入更改为焦点内的任何元素。或者，您必须将焦点设置在要触发事件的复选框上。在下面的示例中，我将其更改为body。然后，正如@enucar所说，您必须调用。更改为fire change event并更改收音机的名称，以便其中一个取消选择另一个。如果它们没有相同的名称，则必须以编程方式取消选择另一个。以下是一个工作示例：

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

在JSFIDLE中：

在更改道具后调用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>

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

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

请对否决票发表评论。

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