如何根據用戶選擇的單選按鈕更改要顯示的內容？

我要創建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>

的Javascript

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

我的代碼以上沒」工作。任何人都可以幫助我展示這個問題嗎？

預先感謝

來源

2013-10-31 user2738520

您錯誤地使用了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

來源

2013-10-31 08:31:02

它工作:)謝謝！ – user2738520

使用此代碼：

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

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

#content_type意味着你選擇的是有一個名爲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; 
     } 
    }); 
});

來源

2013-10-31 08:28:32

你的選擇是錯誤的。

1）相反的#content_type，你應該使用input[name=content_type]

2）此外，從的getElementById取出#：

document.getElementById('#show')

應該

document.getElementById('show')

或改變它使用jQuery：

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

來源

2013-10-31 08:28:35

下面是修改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(); 
    }); 
});

這裏是demo

來源

2013-10-31 08:37:22 iJade

如何根據用戶選擇的單選按鈕更改要顯示的內容？

回答

相關問題