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

how to change content to display according to radio button that user select?

本文关键字：显示 单选按钮 何根 用户 选择      更新时间：2023-09-26

我将创建 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>

爪哇语

$(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;
        }
    });
});

JSfiddle

您的选择器是错误的。

1）而不是#content_type，你应该使用input[name=content_type]

2）另外，从getElementById中删除#：

document.getElementById('#show')

应该是 

document.getElementById('show')

或者将其更改为使用 jQuery：

$('#show').html("1st radio button");

这是修改后的 html ....我只是在您的消息中添加了一个跨度

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

这是jQuery

$(document).ready(function(){
    $('span').hide();
    $('input[name="content_type"]').on('change',function(){
       $('span').hide();
       $(this).next().show();
    });
});

这是演示

使用以下代码：

$('input[name=content_type]').on('change', function(){

或

$('input[type=radio]').on('change', function(){

#content_type意味着您正在选择一个 id 名为 content_type 的元素，并且您没有这样的任何元素。

之后，您的JS代码将是：

$(document).ready(function(){
    $('input[type=radio]').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;
        }
    });
});
相关文章：