0

次のように、それぞれの後に 3 つのラジオ ボタンと div があります。

<input type="radio" name="radios" id="my_radio_1" value="" />
<div id="my_radio_1_text" style="display:none;">Content for radio 1</div>

<input type="radio" name="radios" id="my_radio_2" value="" />
<div id="my_radio_2_text" style="display:none;">Content for radio 2</div>

<input type="radio" name="radios" id="my_radio_3" value="" />
<div id="my_radio_3_text" style="display:none;">Content for radio 3</div>

ご覧のとおり、div は最初は で非表示になっていdisplay:none;ます。私がやろうとしているのは、各ラジオ ボタンが選択されたときに、各ラジオ ボタンの直後に div を表示することです (ラジオ ボタンが選択されていない場合は、その後に div を非表示にしたい)。これを行うことで、ラジオボタンが選択されたときに、ラジオボタンの後に div を表示できます。

$(document).on('change', 'input:radio[name=radios]', function(){

    $('#' + $(this).attr('id') + '_text').show();

});

しかし、別のラジオボタンが選択されているときにdivを非表示にする方法がわかりません。アイデアはありますか？

4

4 に答える 4

0

このような

$(document).on('change', 'input:radio[name=radios]', function () {
    $('input:radio[name=radios]').next().hide(); // hide all divs after radio
    $(this).next().show(); // show the div next to current radio button
});
于 2013-06-27T13:27:10.780 に答える
0

私がしているdivsことは、選択されたものを表示する前にすべてを非表示にすることです。div に のクラスを指定myDivし、表示する前に JavaScript を使用して非表示にします。

$(document).on('change', 'input:radio[name=radios]', function(){
    $('.myDiv').hide();
    $('#' + $(this).attr('id') + '_text').show();
});
于 2013-06-27T13:26:02.357 に答える