3

ユーザーが選択できる 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;
        }
    });

上記のコードは機能しませんでした。この問題を示すのを手伝ってくれる人はいますか?

少し早いですがお礼を

4

4 に答える 4

0

このコードを使用してください：

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

また

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

#content_typecontent_type という名前の ID を持つ要素を選択していることを意味します。そして、あなたはそのような要素を持っていません。

その後、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-31T08:28:32.303 に答える
0

セレクターが間違っています。

1)の代わりに#content_type、使用する必要がありますinput[name=content_type]

2)また、 getElementById からを削除します。#

document.getElementById('#show')

する必要があります

document.getElementById('show')

または、jQuery を使用するように変更します。

$('#show').html("1st radio button");
于 2013-10-31T08:28:35.763 に答える
0

これが変更された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();
    });
});

そして、これがデモです

于 2013-10-31T08:37:22.440 に答える