如何根据用户选择的单选按钮更改显示内容？

user2738520 发表于 Dev

用户名

我将创建3个单选按钮供用户选择。一旦用户单击该按钮，它将向用户显示该用户选择的单选按钮的描述。

例如

- if user select first radio button ==> it will show the description under that
                                        radio button

- if user select second radio button ==> it will show the description under that
                                        radio button

- if user select third radio button ==> it will show the description under that
                                        radio button

我的密码

<p><input type='radio' name='content_type' value='1' />&nbsp;This is content A of request</p>
<p><input type='radio' name='content_type' value='2' />&nbsp;This is content B of request</p>
<p><input type='radio' name='content_type' value='3' />&nbsp;This is content C of request</p>
<div id='show'></div>

Java脚本

$(document).ready(function(){
    $('#content_type').on('change', function(){
    var n = $(this).val();
    switch(n)
    {
            case '1':
                  document.getElementById('#show').innerHTML="1st radio button";
                  break;
            case '2':
                  document.getElementById('#show').innerHTML="2nd radio button";
                  break;
            case '3':
                  document.getElementById('#show').innerHTML="3rd radio button";
                  break;
        }
    });

我上面的代码不起作用。谁能帮助我显示此问题？

预先感谢

帕维尔·埃夫涅涅夫

您错误地使用了jQuery选择器。另外，您需要关闭$（document）.ready（）。正确的代码：

$(document).ready(function(){
    $('input[name=content_type]').on('change', function(){
    var n = $(this).val();
    switch(n)
    {
            case '1':
                  $('#show').html("1st radio button");
                  break;
            case '2':
                  $('#show').html("2nd radio button");
                  break;
            case '3':
                  $('#show').html("3rd radio button");
                  break;
        }
    });
});