ラジオボタンの選択に基づいてテキストを動的に表示/非表示にする

<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"が押されていますが、テキストは変わりません。マウスで選択した場合にのみ変化します。ここで間違っていますラジオボタンの選択に基づいてテキストを動的に表示/非表示にする

出典

2017-03-21 Sri Ram

-1

あなたには3エラーがあります。最初に、キー入力チェックイベントを入力からフォーカス内の任意の要素に変更する必要があります。または、イベントを発生させるためのチェックボックスに焦点を合わせる必要があります。以下の例では、それをbodyに変更しました。次に、@ changecar（）を呼び出して変更イベントを発生させ、ラジオの名前を変更してもう一方のラジオを非選択にする必要があると述べました。彼らが同じ名前を持っていない場合は、プログラムで他のものを選択解除する必要があります。 JSFiddleで

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

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

出典

2017-03-21 15:59:05

downvoteにコメントしてください。 –

コール小道具を変更した後change()機能ここでは実施例です。

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

EDIT：また、ラジオボタンの名前を編集して、同じ値を与えます。

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

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

出典

2017-03-21 15:59:14 enucar

ラジオボタンの選択に基づいてテキストを動的に表示/非表示にする

答えて

関連する問題