基于单选按钮选择动态显示/隐藏文本[重复]答案

【问题标题】：Dynamically Show/hide text based on radio button select [duplicate]基于单选按钮选择动态显示/隐藏文本[重复]
【发布时间】：2017-03-21 15:53:41
【问题描述】：

<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”时会检查正确的按钮，但文本不会更改。它们仅在使用鼠标选择时才会更改。我在哪里出错了

【问题讨论】：

标签： javascript jquery

【解决方案1】：

修改prop后调用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'>

【讨论】：

【解决方案2】：

您有 3 个错误。首先，您必须将 keydown 检查事件从输入更改为焦点内的任何元素。或者您必须将焦点设置在复选框上才能触发事件。在下面的示例中，我将其更改为 body。然后，正如@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/

【讨论】：

请对downvote发表评论。